本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下
效果图:
方法一:for循环+if判断当前点击与自定义数组是否匹配
tab切换button {
width:120px;
height: 32px;
line-height: 32px;
background-color: #ccc;
font-size: 24px;
}
div {
display: none;
width:200px;
height: 200px;
font-size: 72px;
color:#ddd;
background-color: green;
border:1px solid black;
}
1
2
3
4
1
2
3
4
//定义数组并获取数组内各个的节点
var buttonArr = document.getElementsByTagName("button");
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < buttonArr.length;i++) {