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原理知識。