几个不同的tab切换示例

　　上一篇《论tab切换的几种实现方法》中讲了tab切换的4种不同实现原理，那么，现在到理论联系实际的时候了，下面就写几个实例。

一、仿”中国人民大学“官网的tab切换，背景是图片，效果图如下：

鼠标移到新闻时的效果

鼠标移到公告时的效果

鼠标移到交流时的效果

学术、交流和文体的内容为空，我没有写。完整代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <style>
  6   *{
  7     padding: 0;
  8     margin: 0;
  9   }
 10   body{
 11     font-family: Arial,Verdana,sans-serif,"宋体";
 12   }
 13   li{
 14     list-style: none;
 15     float:left;
 16   }
 17   a{
 18     text-decoration: none;
 19     color: #ffeec6;
 20   }
 21   #tanContainer{
 22     height: 210px;
 23     width: 470px;
 24     background: url(homeinfo-trans-bg.png);
 25     overflow: hidden;
 26     color: #ffeec6;
 27   }
 28   #tanContainer li a{
 29     height: 25px;
 30     display: inline-block;
 31     margin-left: 18px;
 32     font-size: 12px;
 33     padding-top: 12px;
 34     margin-bottom: 15px;
 35   }
 36   ul li a.fli {
 37   }
 38   #tabOne{
 39     width: 122px;
 40     opacity: 0;
 41   }
 42   #tabTwo{
 43     padding-left: 102px;
 44   }
 45   #tabCon {
 46     clear: both;
 47   }
 48   #tabCon p a{
 49     color: #FFF2D5;
 50   }
 51   div div p{
 52     font-size: 12px;
 53     margin: 10px 0 0 20px;
 54     width: 440px;
 55   }
 56   #bigPara{
 57     font-size: 16px;
 58     color: #FFF2D5;
 59     border-bottom: 1px dotted #FFF2D5;
 60     padding-bottom: 5px;
 61   }
 62   #tabCon div {
 63     display:none;
 64   }
 65   #tabCon div.fdiv {
 66     display:block;
 67   }
 68 </style>
 69 </head>
 70 <body>
 71   <div id="tanContainer">
 72     <div id="tab">
 73       <ul>
 74         <li><a class="fli" href="#" id="tabOne">新闻</a></li>
 75         <li><a href="#" id="tabTwo">公告</a></li>
 76         <li><a href="#">学术</a></li>
 77         <li><a href="#">交流</a></li>
 78         <li><a href="#">文体</a></li>
 79       </ul>
 80     </div>
 81     <div id="tabCon">
 82       <div class="fdiv">
 83         <p id="bigPara"><a href="#">塞浦路斯总统尼科斯·阿纳斯塔西亚迪斯到访人民大学 获...</a></p>
 84         <p><a href="#" title="中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)">中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)</a></p>
 85         <p><a href="#">中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)</a></p>
 86         <p><a href="#">中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)</a></p>
 87         <p><a href="#">中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉</a></p>
 88 
 89       </div>
 90       <div>
 91         <p><a>2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)</a></p>
 92         <p><a>关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)</a></p>
 93         <p><a>我校第十六门中国大学视频公开课上线，请大家积极关注...(2015-10-26)</a></p>
 94         <p><a>关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)</a></p>
 95         <p><a>关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)</a></p>
 96         <p><a>中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)</a></p>
 97       </div>
 98       <div>内容三</div>
 99       <div>内容四</div>
100       <div>内容五</div>
101     </div>
102   </div>
103 </body>
104 <script>
105   var tabs=document.getElementById("tab").getElementsByTagName("li");
106   var divs=document.getElementById("tabCon").getElementsByTagName("div");
107 
108   for(var i=0;i<tabs.length;i++){
109     tabs[i].onmouseover=function(){change(this);}
110   }
111 
112   function change(obj){
113   for(var i=0;i<tabs.length;i++){
114     if(tabs[i]==obj){
115     tabs[i].className="fli";
116     divs[i].className="fdiv";
117       if(i==0){
118         document.getElementById("tanContainer").style.backgroundPosition="0 0"
119       }else{
120         document.getElementById("tanContainer").style.backgroundPosition="0 -210px"
121       }
122   }else{
123     tabs[i].className="";
124     divs[i].className="";
125     }
126     }
127   } 
128 </script>
129 </html>

View Code

　　此实例是很简单也很常见的tab切换，js中多了一点的就是改变了背景图片的位置，其他的就是简单的样式。

二、上一篇讲了不用js，用input:checked来实现tab切换效果，现在就用此原理加上css3做一个漂亮的实例，在切换的时候，内容区是渐现的。效果图如下：

鼠标点击HTML/CSS时的效果

鼠标点击AJAX时的效果

完整代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>input:checked实现tab切换</title>
  6 <style>
  7 .tabs{
  8   color: #FFF;
  9   font-family: "微软雅黑";
 10 }
 11 input{
 12   opacity: 0;/*隐藏input的选择框*/
 13 }
 14 input:checked+label{
 15   padding-bottom: 6px;
 16   font-weight: bold;
 17 }
 18 label{
 19   cursor: pointer;/*鼠标移上去变成手状*/
 20   float: left;
 21 
 22   width: 120px;
 23   line-height: 40px;
 24   margin-right: 5px;
 25   text-align: center;
 26 }
 27 .tabs label:nth-of-type(1){
 28   background: #5eb0de;
 29 }
 30 .tabs label:nth-of-type(2){
 31   background: #86cad7;
 32 }
 33 .tabs label:nth-of-type(3){
 34   background: #e9bab3;
 35 }
 36 .tabs label:nth-of-type(4){
 37   background: #a8c194;
 38 }
 39 label:hover{
 40   font-weight: bold;
 41 }
 42 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
 43 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){
 44   opacity: 1;
 45   background: #5eb0de;
 46   -webkit-transition: .3s;
 47 }
 48 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
 49   opacity: 1;
 50   background: #86cad7;
 51   -webkit-transition: .3s;
 52 }
 53 .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){
 54   opacity: 1;
 55   background: #e9bab3;
 56   -webkit-transition: .3s;
 57 }
 58 .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){
 59   opacity: 1;
 60   background: #a8c194;
 61   -webkit-transition: .3s;
 62 }
 63 .panel{
 64   opacity: 0;
 65   position: absolute;/*使内容区域位置一样*/
 66 
 67   height: 200px;
 68   width: 455px;
 69   margin-top: 25px;
 70   padding: 0 20px;
 71 }
 72 </style>
 73 </head>
 74 <body>
 75   <div class="tabs">
 76       <input checked id="one" name="tabs" type="radio">
 77       <label for="one">HTML/CSS</label>
 78 
 79       <input id="two" name="tabs" type="radio">
 80       <label for="two">JavaScript</label>
 81 
 82       <input id="three" name="tabs" type="radio">
 83       <label for="three">AJAX</label>
 84 
 85       <input id="four" name="tabs" type="radio">
 86       <label for="four">Sever Side</label>
 87 
 88       <div class="panels">
 89         <div class="panel">
 90           <h2>HTML文本标签语言</h2>
 91           <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！</p>
 92         </div>
 93 
 94         <div class="panel">
 95           <h2>JavaScript脚本语言</h2>
 96           <p>JavaScript 是世界上最流行的脚本语言。<br/>
 97              JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。<br/>
 98              JavaScript 被设计为向 HTML 页面增加交互性。
 99           </p>
100         </div>
101 
102         <div class="panel">
103           <h2>AJAX阿贾克斯</h2>
104           <p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br/>
105           AJAX 不是新的编程语言，而是一种使用现有标准的新方法。<br/>
106           AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
107           </p>
108         </div>
109 
110         <div class="panel">
111         <h2>Sever Side服务器脚本</h2>
112           <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/>
113           ASP 是创建动态交互性网页的强大工具。<br/>
114           ADO 指 ActiveX 数据对象（ActiveX Data Objects）。<br/>
115           PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/>
116           VBScript 是微软公司出品的脚本语言。
117           </p>
118         </div>
119 
120       </div>
121   </div>
122 </body>
123 </html>

View Code