1. 程式人生 > >用html+css+js實現選項卡切換效果

用html+css+js實現選項卡切換效果

window.onload = function () {
chang();
var myTab = document.getElementById("gameDevelopment"); //整個div
var myUl = myTab.getElementsByTagName("ul")[0];//一個節點
var myLi = myUl.getElementsByTagName("li"); //陣列
var myDiv = myTab.getElementsByTagName("div"); //陣列

for(var i = 0; i<myLi.length;i++){
myLi[i].index = i;
myLi[i].onclick = function(){
for(var j = 0; j < myLi.length; j++){
myLi[j].className="off";
myDiv[j].className = "hide";
}//雙重for迴圈,設定點選到的li標籤的屬性。並使div與li對應。所以點選到了哪個li,就使他對應的div為show,其它為hide,自己為on,其他為off。
this.className = "on";
myDiv[this.index].className = "show";
}
}
}