JS 實現 Tab標籤切換功能
Tab標籤切換
效果圖：
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;
}
|
JS部分：
window.onload=function() //onload 事件控制代碼，文件裝載結束時呼叫
{
var tag=document.getElementById("tag").children; //獲取Tag下的li，即Tag標籤
var content=document.getElementById("tagContent").children; //獲取Tag標籤對應的內容
content[0].style.display = "block"; //預設顯示第一個標籤的內容
for(var i=0; i<len; i++) //無論點選誰都能實現當前顯示，其餘隱藏
{
tag[i].index=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.index].className = "current";
content[this.index].style.display = "block";
}
}
}
解釋 ： 程式碼涉及了JS的閉包。
閉包：函式能訪問定義他們的外部函式的變數和引數（除了this、arguments）。尤其重要的是他們取得的是外部變數的最後一個值！ 也就是
tag[i].onclick=function() { alert(i); //3 }
彈出的都是3，因為3是for迴圈中 i 最終的值 。 解決辦法就是為每個tag[i]新增一個index值，在函式內部通過this.index呼叫即可與 i 同步
程式碼同時也涉及this的取值問題.
tag[i].onclick=function() { alert(this); // DOM元素 }
操作DOM事件時（如onclick、onmouseover..）函式中的this指向的是該元素，而不是全域性變數或所在物件。
如換成
var a=function(){ alert(this);//window }
this則指向window物件。
可看出，雖然僅僅是個很簡單的Tag標籤切換功能，但也能涉及很多JS原理知識。