jQ基础篇--用jQuery,JS实现tab切换

以下代码转自: https://segmentfault.com/a/1190000000430342

jquery实现tab切换

html代码：

 

      
tab切换一
      
tab切换二
      
tab切换三
 



      
显示内容一

      
显示内容二

      
显示内容三

jquery代码如下：

$(function(){
    tabs($("#tabs01 a"), $('#container01 .con'));  
})

下面的代码就是具体实现tabs的函数：

var tabs = function(tab, con){
    tab.click(function(){
        var indx = tab.index(this);
        tab.removeClass('current');
        $(this).addClass('current');
        con.hide();
        con.eq(indx).show();
    })    
}

javascript实现tab切换
css代码：(公用)

方法一

在这里先把tab0, tab1, tab2都设置成display:none, class属性为white, 然后再根据所传参数来设置成display:block, class为blue
方法一的HTML:

    

    

       
Javascript
       
Action Script
       
Photoshop
    
    

        
 
    
    

    

    
    

    

    
  

方法二

方法二的HTML代码：

   
Javascript
   
Action Script
   
Photoshop

注意这种方法不能去掉l,m, 直接写成for (i=0; i<3; i++), for (j=0; j<3; j++)
因为i原本是函数的参数，它的值是外面传进来的，如果将for (l=0; l<3; l++)换成for (i=0; i<3; i++)的话，i就被重新赋值了，showTab(0,0)、showTab(1,1)、showTab(1,2)括号里无论传任何值都没有区别了

方法三
html代码如下：

    

      
标签一
      
标签二
      
标签三
   
   

      
 内容一
内容一 
      
 内容二
内容二 
      
 内容三
内容三 
   

css代码：

*{margin:0;padding:0;}
 .wrap{width:500px; margin:10px auto; }
 #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
 #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
 #tag .current{ color:#000; background:#ccc; }
 #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }

function tabs(title,content){
        var tag=document.getElementById(title).children; //获取Tag下的li，即Tag标签 
        var content=document.getElementById(content).children; //获取Tag标签对应的内容 
        content[0].style.display = "block"; //默认显示第一个标签的内容 
        var len= tag.length; 
      for(var i=0; i