用html+css+js实现选项卡切换效果

Posted 2021-01-29 eggtomato

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