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 li{ 11 list-style: none; 12 float:left; 13 } 14 #tabCon{ 15 clear: both; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="tanContainer"> 21 <div id="tab"> 22 <ul> 23 <li>标题一</li> 24 <li>标题二</li> 25 <li>标题三</li> 26 <li>标题四</li> 27 </ul> 28 </div> 29 <div id="tabCon"> 30 <div>内容一</div> 31 <div>内容二</div> 32 <div>内容三</div> 33 <div>内容四</div> 34 </div> 35 </div> 36 </body> 37 </html>
现在的显示效果如下图：
四个tab标题和四个内容区都显示在了页面中，现在要实现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 li{ 11 list-style: none; 12 } 13 </style> 14 <script> 15 function tab(pid){ 16 var tabs=["tab1","tab2","tab3","tab4"]; 17 for(var i=0;i<4;i++){ 18 if(tabs[i]==pid){ 19 document.getElementById(tabs[i]).style.display="block"; 20 }else{ 21 document.getElementById(tabs[i]).style.display="none"; 22 } 23 } 24 } 25 </script> 26 </head> 27 <body> 28 <div id="tanContainer"> 29 <div id="tabNav"> 30 <ul> 31 <li onclick="tab('tab1')">标题一</li> 32 <li onclick="tab('tab2')">标题二</li> 33 <li onclick="tab('tab3')">标题三</li> 34 <li onclick="tab('tab4')">标题四</li> 35 </ul> 36 </div> 37 <div id="tab"> 38 <div id="tab1">内容一</div> 39 <div id="tab2">内容二</div> 40 <div id="tab3">内容三</div> 41 <div id="tab4">内容四</div> 42 </div> 43 </div> 44 </body> 45 </html>
方法二：先设置所有内容隐藏，然后点击标题对应的内容显示。代码如下：
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 li{ 11 list-style: none; 12 float:left; 13 } 14 #tabCon{ 15 clear: both; 16 } 17 #tabCon_1{ 18 display: none; 19 } 20 #tabCon_2{ 21 display: none; 22 } 23 #tabCon_3{ 24 display: none; 25 } 26 </style> 27 <script> 28 function changeTab(tabCon_num){ 29 for(i=0;i<=3;i++) { 30 document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏 31 } 32 document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层 33 } 34 </script> 35 </head> 36 <body> 37 <div id="tanContainer"> 38 <div id="tab"> 39 <ul> 40 <li onclick="changeTab('0')">标题一</li> 41 <li onclick="changeTab('1')">标题二</li> 42 <li onclick="changeTab('2')">标题三</li> 43 <li onclick="changeTab('3')">标题四</li> 44 </ul> 45 </div> 46 <div id="tabCon"> 47 <div id="tabCon_0">内容一</div> 48 <div id="tabCon_1">内容二</div> 49 <div id="tabCon_2">内容三</div> 50 <div id="tabCon_3">内容四</div> 51 </div> 52 </div> 53 </body> 54 </html>
方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。代码如下：
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 li{ 11 list-style: none; 12 float:left; 13 } 14 #tabCon { 15 clear: both; 16 } 17 #tabCon div { 18 display:none; 19 } 20 #tabCon div.fdiv { 21 display:block; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="tanContainer"> 27 <div id="tab"> 28 <ul> 29 <li class="fli">标题一</li> 30 <li>标题二</li> 31 <li>标题三</li> 32 <li>标题四</li> 33 </ul> 34 </div> 35 <div id="tabCon"> 36 <div class="fdiv">内容一</div> 37 <div>内容二</div> 38 <div>内容三</div> 39 <div>内容四</div> 40 </div> 41 </div> 42 </body> 43 <script> 44 var tabs=document.getElementById("tab").getElementsByTagName("li"); 45 var divs=document.getElementById("tabCon").getElementsByTagName("div"); 46 47 for(var i=0;i<tabs.length;i++){ 48 tabs[i].onclick=function(){change(this);} 49 } 50 51 function change(obj){ 52 for(var i=0;i<tabs.length;i++){ 53 if(tabs[i]==obj){ 54 tabs[i].className="fli"; 55 divs[i].className="fdiv"; 56 }else{ 57 tabs[i].className=""; 58 divs[i].className=""; 59 } 60 } 61 } 62 </script> 63 </html>
该方法的缺点是，内容块的div下面不能再有div标签了。
方法四：不用js，用“input:checked”来做tab切换，先把所有的内容隐藏，被选中的内容显示。代码如下：
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 input{ 8 opacity: 0;/*隐藏input的选择框*/ 9 } 10 label{ 11 cursor: pointer;/*鼠标移上去变成手状*/ 12 float: left; 13 } 14 label:hover{ 15 background: #eee; 16 } 17 input:checked+label{ 18 color: red; 19 } 20 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ 21 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1), 22 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ 23 opacity: 1; 24 } 25 .panel{ 26 opacity: 0; 27 position: absolute;/*使内容区域位置一样*/ 28 } 29 </style> 30 </head> 31 <body> 32 <div class="tabs"> 33 <input checked id="one" name="tabs" type="radio"> 34 <label for="one">标题一</label> 35 36 <input id="two" name="tabs" type="radio"> 37 <label for="two">标题二</label> 38 39 <div class="panels"> 40 <div class="panel"> 41 <p>内容一</p> 42 </div> 43 <div class="panel"> 44 <p>内容二</p> 45 </div> 46 </div> 47 </div> 48 </body> 49 </html>
改方法的缺点是，不同区域切换只能通过点击。