首页 > Web开发 > 详细

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

时间:2018-12-24 15:26:25      阅读:127      评论:0      收藏:0      [点我收藏+]

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

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

原文:https://www.cnblogs.com/eggtomcato/p/10168526.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!