js利用tab键切换当前页面_4种JavaScript实现简单tab选项卡切换的方法

本文实例讲解了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++) {