欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2015年11月05日 11:17:35   投稿：lijiao  
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)tab切換的四種方法，并且對(duì)每個(gè)方法進(jìn)行了評(píng)價(jià)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

<!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>標(biāo)題一</li>
 <li>標(biāo)題二</li>
 <li>標(biāo)題三</li>
 <li>標(biāo)題四</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)在的顯示效果如下圖：

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

方法一：點(diǎn)擊標(biāo)題對(duì)應(yīng)的內(nèi)容顯示，非點(diǎn)擊標(biāo)題對(duì)應(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')">標(biāo)題一</li>
 <li onclick="tab('tab2')">標(biāo)題二</li>
 <li onclick="tab('tab3')">標(biāo)題三</li>
 <li onclick="tab('tab4')">標(biāo)題四</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)容隱藏，然后點(diǎn)擊標(biāo)題對(duì)用的內(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";//顯示當(dāng)前層 
 } 
 </script>
 </head>
 <body>
 <div id="tanContainer">
 <div id="tab">
 <ul>
 <li onclick="changeTab('0')">標(biāo)題一</li>
 <li onclick="changeTab('1')">標(biāo)題二</li>
 <li onclick="changeTab('2')">標(biāo)題三</li>
 <li onclick="changeTab('3')">標(biāo)題四</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>

方法三：顯示和隱藏通過(guò)是有擁有class控制，先把所有的內(nèi)容隱藏dispaly設(shè)為none，而該class的display設(shè)置為block，遍歷所有標(biāo)題節(jié)點(diǎn)和內(nèi)容節(jié)點(diǎn)，點(diǎn)擊標(biāo)題后，該標(biāo)題節(jié)點(diǎn)和對(duì)用的內(nèi)容節(jié)點(diǎn)擁有class，其他的沒(mé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 div {
 display:none;
 }
 #tabCon div.fdiv {
 display:block;
 }
 </style>
 </head>
 <body>
 <div id="tanContainer">
 <div id="tab">
 <ul>
 <li class="fli">標(biāo)題一</li>
 <li>標(biāo)題二</li>
 <li>標(biāo)題三</li>
 <li>標(biāo)題四</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>

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

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

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>input:checked實(shí)現(xiàn)tab切換</title>
 <style>
 input{
 opacity: 0;/*隱藏input的選擇框*/
 }
 label{
 cursor: pointer;/*鼠標(biāo)移上去變成手狀*/
 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">標(biāo)題一</label>
 
 <input id="two" name="tabs" type="radio">
 <label for="two">標(biāo)題二</label>
 
 <div class="panels">
 <div class="panel">
 <p>內(nèi)容一</p>
 </div>
 <div class="panel">
 <p>內(nèi)容二</p>
 </div>
 </div>
 </div>
 </body>
 </html>

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

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

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

相關(guān)文章

最新評(píng)論