The previous article "Four ways to implement tab switching in JavaScript" talked about 4 different implementation principles of tab switching. So, now it’s time to connect theory with practice. Here are a few Example.
1. Imitate the tab switching of the official website of "Renmin University of China". The background is a picture. The rendering is as follows:
The effect when the mouse is moved over the news
The effect when the mouse is moved over the announcement
The effect when the mouse is moved to communicate
The academic, communication and literary content is empty and I did not write anything. The complete code is as follows:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } body{ font-family: Arial,Verdana,sans-serif,"宋体"; } li{ list-style: none; float:left; } a{ text-decoration: none; color: #ffeec6; } #tanContainer{ height: 210px; width: 470px; background: url(homeinfo-trans-bg.png); overflow: hidden; color: #ffeec6; } #tanContainer li a{ height: 25px; display: inline-block; margin-left: 18px; font-size: 12px; padding-top: 12px; margin-bottom: 15px; } ul li a.fli { } #tabOne{ width: 122px; opacity: 0; } #tabTwo{ padding-left: 102px; } #tabCon { clear: both; } #tabCon p a{ color: #FFF2D5; } div div p{ font-size: 12px; margin: 10px 0 0 20px; width: 440px; } #bigPara{ font-size: 16px; color: #FFF2D5; border-bottom: 1px dotted #FFF2D5; padding-bottom: 5px; } #tabCon div { display:none; } #tabCon div.fdiv { display:block; } </style> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li><a class="fli" href="#" id="tabOne">新闻</a></li> <li><a href="#" id="tabTwo">公告</a></li> <li><a href="#">学术</a></li> <li><a href="#">交流</a></li> <li><a href="#">文体</a></li> </ul> </div> <div id="tabCon"> <div class="fdiv"> <p id="bigPara"><a href="#">塞浦路斯总统尼科斯·阿纳斯塔西亚迪斯到访人民大学 获...</a></p> <p><a href="#" title="中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)">中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)</a></p> <p><a href="#">中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)</a></p> <p><a href="#">中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)</a></p> <p><a href="#">中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉</a></p> </div> <div> <p><a>2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)</a></p> <p><a>关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)</a></p> <p><a>我校第十六门中国大学视频公开课上线,请大家积极关注...(2015-10-26)</a></p> <p><a>关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)</a></p> <p><a>关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)</a></p> <p><a>中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)</a></p> </div> <div>内容三</div> <div>内容四</div> <div>内容五</div> </div> </div> </body> <script> var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("tabCon").getElementsByTagName("div"); for(var i=0;i<tabs.length;i++){ tabs[i].onmouseover=function(){change(this);} } function change(obj){ for(var i=0;i<tabs.length;i++){ if(tabs[i]==obj){ tabs[i].className="fli"; divs[i].className="fdiv"; if(i==0){ document.getElementById("tanContainer").style.backgroundPosition="0 0" }else{ document.getElementById("tanContainer").style.backgroundPosition="0 -210px" } }else{ tabs[i].className=""; divs[i].className=""; } } } </script> </html>
This example is a very simple and common tab switch. The extra thing in js is to change the position of the background image, and the rest is a simple style.
2. Use input:checked to achieve the tab switching effect. Now use this principle and add css3 to make a beautiful example. When switching, the content area will gradually appear. The rendering is as follows:
The effect when the mouse clicks on HTML/CSS
The effect of AJAX when the mouse clicks
The complete code is as follows:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked实现tab切换</title> <style> .tabs{ color: #FFF; font-family: "微软雅黑"; } input{ opacity: 0;/*隐藏input的选择框*/ } input:checked+label{ padding-bottom: 6px; font-weight: bold; } label{ cursor: pointer;/*鼠标移上去变成手状*/ float: left; width: 120px; line-height: 40px; margin-right: 5px; text-align: center; } .tabs label:nth-of-type(1){ background: #5eb0de; } .tabs label:nth-of-type(2){ background: #86cad7; } .tabs label:nth-of-type(3){ background: #e9bab3; } .tabs label:nth-of-type(4){ background: #a8c194; } label:hover{ font-weight: bold; } /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){ opacity: 1; background: #5eb0de; -webkit-transition: .3s; } .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ opacity: 1; background: #86cad7; -webkit-transition: .3s; } .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){ opacity: 1; background: #e9bab3; -webkit-transition: .3s; } .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){ opacity: 1; background: #a8c194; -webkit-transition: .3s; } .panel{ opacity: 0; position: absolute;/*使内容区域位置一样*/ height: 200px; width: 455px; margin-top: 25px; padding: 0 20px; } </style> </head> <body> <div class="tabs"> <input checked id="one" name="tabs" type="radio"> <label for="one">HTML/CSS</label> <input id="two" name="tabs" type="radio"> <label for="two">JavaScript</label> <input id="three" name="tabs" type="radio"> <label for="three">AJAX</label> <input id="four" name="tabs" type="radio"> <label for="four">Sever Side</label> <div class="panels"> <div class="panel"> <h2 id="HTML文本标签语言">HTML文本标签语言</h2> <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习!你会喜欢它的!</p> </div> <div class="panel"> <h2 id="JavaScript脚本语言">JavaScript脚本语言</h2> <p>JavaScript 是世界上最流行的脚本语言。<br/> JavaScript 是属于 web 的语言,它适用于PC、笔记本电脑、平板电脑和移动电话。<br/> JavaScript 被设计为向 HTML 页面增加交互性。 </p> </div> <div class="panel"> <h2 id="AJAX阿贾克斯">AJAX阿贾克斯</h2> <p>AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。<br/> AJAX 不是新的编程语言,而是一种使用现有标准的新方法。<br/> AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 </p> </div> <div class="panel"> <h2 id="Sever-Side服务器脚本">Sever Side服务器脚本</h2> <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/> ASP 是创建动态交互性网页的强大工具。<br/> ADO 指 ActiveX 数据对象(ActiveX Data Objects)。<br/> PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/> VBScript 是微软公司出品的脚本语言。 </p> </div> </div> </div> </body> </html>

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Zend Studio 13.0.1
Powerful PHP integrated development environment

SublimeText3 English version
Recommended: Win version, supports code prompts!

SublimeText3 Chinese version
Chinese version, very easy to use

Dreamweaver Mac version
Visual web development tools