用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";
}
}
}

猜你喜欢

转载自www.cnblogs.com/eggtomcato/p/10168526.html