DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript實現tab切換的四種方法
javascript實現tab切換的四種方法
編輯:關於JavaScript     

tab切換在網頁中很常見,故最近總結了4種實現方法。
首先,寫出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>內容一</div>
  <div>內容二</div>
  <div>內容三</div>
  <div>內容四</div>
  </div>
 </div>
 </body>
 </html>

現在的顯示效果如下圖:

四個tab標題和四個內容區都顯示在了頁面中,現在要實現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;
 }
 </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">內容一</div>
  <div id="tab2">內容二</div>
   <div id="tab3">內容三</div>
  <div id="tab4">內容四</div>
  </div>
 </div>
 </body>
 </html>

方法二:先設置所有內容隱藏,然後點擊標題對用的內容顯示。代碼如下:

 <!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">內容一</div>
  <div id="tabCon_1">內容二</div>
  <div id="tabCon_2">內容三</div>
  <div id="tabCon_3">內容四</div>
 </div>
 </div>
 </body>
 </html>

方法三:顯示和隱藏通過是有擁有class控制,先把所有的內容隱藏dispaly設為none,而該class的display設置為block,遍歷所有標題節點和內容節點,點擊標題後,該標題節點和對用的內容節點擁有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">內容一</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].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>

該方法的缺點是,內容塊的div下面不能再有div標簽了。

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

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>input:checked實現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;/*使內容區域位置一樣*/
 }
 </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>內容一</p>
   </div>
   <div class="panel">
   <p>內容二</p>
   </div>
  </div>
 </div>
 </body>
 </html>

該方法的缺點是,不同區域切換只能通過點擊。

以上就是為大家總結的tab切換實現方法,希望對大家的學習有所幫助,順著這個思路動手制作自己tab切換特效。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved