css部分
.on{ background:#f60;color:#fff}
.box div{ width:200px; height:200px; border:1px solid #000; display:none}
html部分
<div id="box" class="box">
<input class="on" type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
<div class='contentbox' style="display:block;">1111</div>
<div class='contentbox'>22222</div>
<div class='contentbox'>3333</div>
</div>
js部分
class Tab {
constructor(id) {
this.oBox = document.getElementById(id);
this.aBtn = this.oBox.getElementsByTagName('input');
this.aDiv = this.oBox.getElementsByClassName('contentbox');
this.iNow=0;
this.init();
}
init() {
for (let i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].onclick = function () {
this.hide();
this.show(i);
}.bind(this);
}
}
hide() {
for (let i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].className ='';
this.aDiv[i].style.display = 'none';
}
}
show(i) {
this.aBtn[i].className ='on';
this.aDiv[i].style.display = 'block'
}
}
class AutoTab extends Tab {
constructor(id) {
super(id);
setInterval(this.next.bind(this), 1500)
}
next() {
this.iNow++;
if (this.iNow == this.aBtn.length) this.iNow = 0;
this.hide();
this.show(this.iNow);
}
}
window.onload = function () {
new Tab('box')
new AutoTab('box2')
}
