jQ基礎篇--用jQuery,JS實現tab切換

jquery實現tab切換

html代碼：

<ul class="tabs" id="tabs01">
      <li><a href="javascript:void(0)" class="current">tab切換一</a></li>
      <li><a href="javascript:void(0)" >tab切換二</a></li>
      <li><a href="javascript:void(0)">tab切換三</a></li>
 </ul>

<div class="container" id="container01">

      <div class="con">顯示內容一</div>

      <div class="con">顯示內容二</div>

      <div class="con">顯示內容三</div>
</div>

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代碼：(公用)

<style type="text/css">
.wrapper {width:600px; height:auto; margin:0 auto;}
p {margin:0; padding:0; color:#333333; font-family:宋體; font-size:12px;}
ul {margin:0; padding:0; list-style-type:none; width:500px; height:16px; border-bottom:#DDDDDD solid 1px;}
li {margin:0; padding:0; height:16px; padding-left:5px; padding-right:10px; float:left; border-left:#FFFFFF solid 1px; border-right:#808080 solid 1px; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000000; background-color:#F4F4F4; cursor:pointer;}
.one {width:500px; padding-top:20px; display:none; }
.blue {color:#58A200; background-color:#8C5C5C;}
.white {color:#000000; background-color:#F4F4F4;}
</style>

方法一

<script type="text/javascript">
function showTab(num){
for (i=0; i<3; i++)
{
document.getElementById("tab"+i).style.display="none";
document.getElementById("id"+i).className="white";

}
document.getElementById("tab"+num).style.display="block";
document.getElementById("id"+num).className="blue";
}
</script>

在這裏先把tab0, tab1, tab2都設置成display:none, class屬性爲white, 而後再根據所傳參數來設置成display:block, class爲blue
方法一的HTML:

<div class="wrapper">
    <ul>
       <li id="id0" onclick="showTab(0)" class="blue">Javascript</li>
       <li id="id1" onclick="showTab(1)">Action Script</li>
       <li id="id2" onclick="showTab(2)">Photoshop</li>
    </ul>
    <div class="one" id="tab0" style="display:block">
        <p> </p>
    </div>
    <div class="one" id="tab1">
    <p></p>
    </div>
    <div class="one" id="tab2">
    <p></p>
    </div>
  </div>

方法二

<script type="text/javascript">
function showTab(i,j){
var x;
var y;
var l,m;
for (l=0; l<3; l++)
{
   x=document.getElementById("id"+l);
   if (i==l)
   {
    x.className="blue";
   }
   else
   {
    x.className="white";
   }
  
}
for (m=0; m<3; m++)
{
   y=document.getElementById("tab" + m);
   if (j==m)
   {
    y.style.display="block";
   }
   else 
   {
    y.style.display="none";
   }
}
}
</script>

方法二的HTML代碼：

<div class="wrapper">
<ul>
   <li id="id0" onclick="showTab(0,0)" class="blue">Javascript</li>
   <li id="id1" onclick="showTab(1,1)">Action Script</li>
   <li id="id2" onclick="showTab(2,2)">Photoshop</li>
</ul>
<div class="one" id="tab0" style="display:block"><p></p></div>
<div class="two" id="tab1" style="display:none"><p></p></div>
<div class="three" id="tab2" style="display:none"><p></p></div>
</div>

注意這種方法不能去掉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代碼以下：

<div class="wrap">
    <ul id="tag">
      <li class="current" >標籤一</li>
      <li>標籤二</li>
      <li>標籤三</li>
   </ul>
   <div id="tagContent">
      <div> 內容一<br>內容一 </div>
      <div> 內容二<br>內容二 </div>
      <div> 內容三<br>內容三 </div>
   </div>
</div>

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<len; i++)   //不管點擊誰都能實現當前顯示，其他隱藏
        { 
        
        
        tag[i].number=i;
        
        tag[i].onclick = function()     //0級DOM的事件句柄註冊

            {     

               for(var n=0; n<len; n++)

               {
                  tag[n].className="";
                  content[n].style.display="none"; 
                }   //首先將所有的div隱藏
           
            tag[this.number].className = "current"; 
            content[this.number].style.display = "block"; 
          } 
        }
    };


    tabs("tag","tagContent");//你想實現tab切換的某一個實例。

 

上面用到了chidren，能夠用childNodes來實現該方法，可是要去除裏面空白節點。代碼以下：（加黑處就是去除空白節點）

function tabs(title,content){
        var tag=document.getElementById(title).childNodes; 
         console.log(tag.length);// 打印結果爲7 
         for(var i=0;i<tag.length;i++){
            if(tag[i].nodeType==3&&/\s/.test(tag[i].nodeValue)){
                tag[i].parentNode.removeChild(tag[i]);
            }
        }
        console.log(tag.length);// 打印結果爲3
         
        var content=document.getElementById(content).childNodes; 
        console.log(content.length);// 打印結果爲7
        for(var i=0;i<content.length;i++){
            if(content[i].nodeType==3&&/\s/.test(content[i].nodeValue)){
                content[i].parentNode.removeChild(content[i]);
            }
        }
        console.log(content.length);// 打印結果爲3
                                                                                                                                         
        content[0].style.display = "block"; //默認顯示第一個標籤的內容 
        var len= tag.length; 
      for(var i=0; i<len; i++)   //不管點擊誰都能實現當前顯示，其他隱藏
        {  
        
        tag[i].number=i;
        
        tag[i].onclick = function()     //0級DOM的事件句柄註冊

            {     

               for(var n=0; n<len; n++)

               {
                  tag[n].className="";
                  content[n].style.display="none"; 
                }   //首先將所有的div隱藏
                
            //console.log(this.number);
            tag[this.number].className = "current"; 
            content[this.number].style.display = "block"; 
          } 
        }
    };
    tabs("tag","tagContent");