tab切換的多種實現方式

tabs切換，實現起來對於稍微熟悉js或是jquery的朋友來說，非常的簡單，但是對於剛入門學習js的同學來說，可能是一個必須要先解決的常見問題。先總結幾種tabs切換技術，從菜鳥級別到普通水平

1. 純菜鳥階段，純js實現，代碼如下：

  html 代碼：

<ul class="tabs" id="tabs">
  <li>
    <div class="content1"></div>
</li>
 <li>
     <div class="content2"></div> 
</li>
 <li>
      <div class="content3"></div>
</li>
</ul>

　js代碼：

var tabs_li=document.getElementById("tabs");
for(var i=0;i<3;i++){
    tabs_li[i].style.className="";
    tabs_li[i].children.style.display="none";
      for(var j=0;j<3;j++){
         tabs_li[j].onclick=function(){
           if(i==j)
              this.style.className="active";
              this.chileren.style.display="block";
         }
    }
}

　　

2. 剛接觸jQuery實現，jQ方法實現，代碼如下：

　html 代碼：

<ul class="tabs" id="tabs">
  <li>
    <div class="content1"></div>
</li>
 <li>
     <div class="content2"></div> 
</li>
 <li>
      <div class="content3"></div>
</li>
</ul>

 

   js代碼：

var tabs_li=$("#tabs");
for(var i=0;i<3;i++){
    tabs_li[i].hide();
    tabs_li[i].children().hide();
      for(var j=0;j<3;j++){
         tabs_li[j].onclick=function(){
           if(i==j)
              $(this).addClass("active");
              $(this).chileren().show();
         }
    }
}

 3.jQuery使用得熟練一點以后，jQ方法實現，代碼如下：

  html代碼：

<ul class="tabs" id="tabs">
  <li class="active"></li>
  <li></li>
  <li></li>
</ul>
<div class="content" id="content">
   <div class="content1 db"></div>
   <div class="content2"></div> 
   <div class="content3"></div>
</div>

//.db{display:block}

    js代碼：

var $tabs=$("#tabs li");
var $content=$("$content div");
var index=0;

$tabs.click(function(){
    index=$(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $content.eq(index).show().siblings().hide();
})

 對於第3中方法，還可以再次改進，其js部分如下：

  

$("#tabs").find("li").each(function(n){
            $(this).click(function(){
                $(this).addClass("active").siblings().removeClass("active");
                $("#content").find("div").eq(n).show().siblings().hide();
            })
        });

 

總結這幾種方法：

 1.方法1和方法2中HTML結構中tabs切換頁與相應的內容content是寫在一起的，方法3中的HTML結構中tabs切換頁面與相應的內容content頁面是分開的.......方法3中的結構更合理。

 2.在內容切換上，方法3實現方法更簡潔易懂。

 

 個人一路走來小小總結，僅供自己總結用，激勵自己寫出更好更有效的代碼，如對剛入行前端的朋友們有點借鑒作用，那更欣慰了，其他的就不奢求了。