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实现方法更简洁易懂。

 

 个人一路走来小小总结，仅供自己总结用，激励自己写出更好更有效的代码，如对刚入行前端的朋友们有点借鉴作用，那更欣慰了，其他的就不奢求了。