search

Home >Web Front-end >JS Tutorial >Two examples of tab switching using javascript_javascript skills

Two examples of tab switching using javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:33:311408browse

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>HTML文本标签语言</h2>
 <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！</p>
 </div>
 
 <div class="panel">
 <h2>JavaScript脚本语言</h2>
 <p>JavaScript 是世界上最流行的脚本语言。<br/>
 JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。<br/>
 JavaScript 被设计为向 HTML 页面增加交互性。
 </p>
 </div>

 <div class="panel">
 <h2>AJAX阿贾克斯</h2>
 <p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br/>
 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。<br/>
 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
 </p>
 </div>
 
 <div class="panel">
 <h2>Sever Side服务器脚本</h2>
 <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/>
 ASP 是创建动态交互性网页的强大工具。<br/>
 ADO 指 ActiveX 数据对象（ActiveX Data Objects）。<br/>
 PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/>
 VBScript 是微软公司出品的脚本语言。
 </p>
 </div>
 
 </div>
 </div>
 </body>
 </html>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript implements scrolling and floating ad code with buffering effect on the screen_javascript skillsNext article：JavaScript implements scrolling and floating ad code with buffering effect on the screen_javascript skills

Related articles

See more