选项卡案例

/* css代码 */

<style type="text/css">
div {
display: none;
background-color: #ccc;
width: 200px;
height: 200px;
border: 1px solid #999;
}
.show {
display: block;
}
.active {
background-color: yellow;
}
</style>

/* Html代码 */

<button class="active">111</button>
<button>222</button>
<button>333</button>
<div class="show">div1</div>
<div>div2</div>
<div>div3</div>

/* Js代码 */

var tabs = document.getElementsByTagName('button');
var divs = document.getElementsByTagName('div');

第一种方法：
for (let i = 0; i < tabs.length; i++) {
tabs[i].onclick = function() {
for (var j = 0; j < tabs.length; j++) {
divs[j].className = '';
tabs[j].className = '';
}
this.className = 'active';
divs[i].className = 'show';
}
};

第二种方法：
for (var i = 0; i < tabs.length; i++) {
tabs[i].index = i;
tabs[i].onclick = function() {
for (var j = 0; j < tabs.length; j++) {
divs[j].className = '';
tabs[j].className = '';
}
this.className = 'active';
divs[this.index].className = 'show';
}
}

 

转载于:https://www.cnblogs.com/chuxinsyn/p/7976828.html