javascript實現(xiàn)tab切換的四種方法

更新時間：2015年11月05日 11:17:35 投稿：lijiao

這篇文章主要為大家詳細介紹了javascript實現(xiàn)tab切換的四種方法，并且對每個方法進行了評價，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實現(xiàn)方法。

首先，寫出tab的框架，加上最簡單的樣式，代碼如下：

<!DOCTYPE html>
 <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
 *{
 padding: 0;
 margin: 0;
 }
 li{
 list-style: none;
 float:left;
 }
 #tabCon{
 clear: both;
 }
 </style>
 </head>
 <body>
 <div id="tanContainer">
 <div id="tab">
 <ul>
 <li>標題一</li>
 <li>標題二</li>
 <li>標題三</li>
 <li>標題四</li>
 </ul>
 </div>
 <div id="tabCon">
 <div>內(nèi)容一</div>
 <div>內(nèi)容二</div>
 <div>內(nèi)容三</div>
 <div>內(nèi)容四</div>
 </div>
 </div>
 </body>
 </html>

現(xiàn)在的顯示效果如下圖：

四個tab標題和四個內(nèi)容區(qū)都顯示在了頁面中，現(xiàn)在要實現(xiàn)tab切換效果，即點擊標題一，內(nèi)容一顯示出來，其他內(nèi)容不顯示；點擊標題二，內(nèi)容二顯示出來，其他內(nèi)容不顯示……
那么，整體思路很簡單，給四個標題綁定事件，觸發(fā)的時候?qū)?yīng)的內(nèi)容顯示，其他的內(nèi)容隱藏。

方法一：點擊標題對應(yīng)的內(nèi)容顯示，非點擊標題對應(yīng)的內(nèi)容隱藏。代碼如下：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
 padding: 0;
 margin: 0;
 }
 li{
 list-style: none;
 }
 </style>
 <script>
 function tab(pid){
 var tabs=["tab1","tab2","tab3","tab4"];
 for(var i=0;i<4;i++){
 if(tabs[i]==pid){
 document.getElementById(tabs[i]).style.display="block";
 }else{
 document.getElementById(tabs[i]).style.display="none";
 }
 }
 }
 </script>
</head>
 <body>
 <div id="tanContainer">
 <div id="tabNav">
 <ul>
 <li onclick="tab('tab1')">標題一</li>
 <li onclick="tab('tab2')">標題二</li>
 <li onclick="tab('tab3')">標題三</li>
 <li onclick="tab('tab4')">標題四</li>
 </ul>
 </div>
 <div id="tab">
 <div id="tab1">內(nèi)容一</div>
 <div id="tab2">內(nèi)容二</div>
 <div id="tab3">內(nèi)容三</div>
 <div id="tab4">內(nèi)容四</div>
 </div>
 </div>
 </body>
 </html>

方法二：先設(shè)置所有內(nèi)容隱藏，然后點擊標題對用的內(nèi)容顯示。代碼如下：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
 padding: 0;
 margin: 0;
 }
 li{
 list-style: none;
 float:left;
 }
 #tabCon{
 clear: both;
 }
 #tabCon_1{
 display: none;
 }
 #tabCon_2{
 display: none;
 }
 #tabCon_3{
 display: none;
 }
 </style>
 <script>
 function changeTab(tabCon_num){
 for(i=0;i<=3;i++) { 
 document.getElementById("tabCon_"+i).style.display="none"; //將所有的層都隱藏 
 } 
 document.getElementById("tabCon_"+tabCon_num).style.display="block";//顯示當前層 
 } 
 </script>
 </head>
 <body>
 <div id="tanContainer">
 <div id="tab">
 <ul>
 <li onclick="changeTab('0')">標題一</li>
 <li onclick="changeTab('1')">標題二</li>
 <li onclick="changeTab('2')">標題三</li>
 <li onclick="changeTab('3')">標題四</li>
 </ul>
 </div>
 <div id="tabCon">
 <div id="tabCon_0">內(nèi)容一</div>
 <div id="tabCon_1">內(nèi)容二</div>
 <div id="tabCon_2">內(nèi)容三</div>
 <div id="tabCon_3">內(nèi)容四</div>
 </div>
 </div>
 </body>
 </html>

方法三：顯示和隱藏通過是有擁有class控制，先把所有的內(nèi)容隱藏dispaly設(shè)為none，而該class的display設(shè)置為block，遍歷所有標題節(jié)點和內(nèi)容節(jié)點，點擊標題后，該標題節(jié)點和對用的內(nèi)容節(jié)點擁有class，其他的沒有。代碼如下：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
 padding: 0;
 margin: 0;
 }
 li{
 list-style: none;
 float:left;
 }
 #tabCon {
 clear: both;
 }
 #tabCon div {
 display:none;
 }
 #tabCon div.fdiv {
 display:block;
 }
 </style>
 </head>
 <body>
 <div id="tanContainer">
 <div id="tab">
 <ul>
 <li class="fli">標題一</li>
 <li>標題二</li>
 <li>標題三</li>
 <li>標題四</li>
 </ul>
 </div>
 <div id="tabCon">
 <div class="fdiv">內(nèi)容一</div>
 <div>內(nèi)容二</div>
 <div>內(nèi)容三</div>
 <div>內(nèi)容四</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].onclick=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";
 }else{
 tabs[i].className="";
 divs[i].className="";
 }
 }
 } 
 </script>
 </html>

該方法的缺點是，內(nèi)容塊的div下面不能再有div標簽了。

方法四：不用js，用“input:checked”來做tab切換，先把所有的內(nèi)容隱藏，被選中的內(nèi)容顯示。代碼如下：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>input:checked實現(xiàn)tab切換</title>
 <style>
 input{
 opacity: 0;/*隱藏input的選擇框*/
 }
 label{
 cursor: pointer;/*鼠標移上去變成手狀*/
 float: left;
 }
 label:hover{
 background: #eee;
 }
 input:checked+label{
 color: red;
 }
 /*選擇前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),
 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
 opacity: 1;
 }
 .panel{
 opacity: 0;
 position: absolute;/*使內(nèi)容區(qū)域位置一樣*/
 }
 </style>
 </head>
 <body>
 <div class="tabs">
 <input checked id="one" name="tabs" type="radio">
 <label for="one">標題一</label>
 
 <input id="two" name="tabs" type="radio">
 <label for="two">標題二</label>
 
 <div class="panels">
 <div class="panel">
 <p>內(nèi)容一</p>
 </div>
 <div class="panel">
 <p>內(nèi)容二</p>
 </div>
 </div>
 </div>
 </body>
 </html>

該方法的缺點是，不同區(qū)域切換只能通過點擊。

如果大家還想深入學(xué)習(xí)，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總

以上就是為大家總結(jié)的tab切換實現(xiàn)方法，希望對大家的學(xué)習(xí)有所幫助，順著這個思路動手制作自己tab切換特效。

您可能感興趣的文章: