选项卡样子
<html>
<head>
<title>ES6面向对象</title>
<style>
input.active{
background:red;
}
#first > div {
width:200px;
height:200px;
background:#ccc;
display:none;
}
#first > div:first-of-type{
display:block;
}
</style>
</head>
<body>
<div id="first">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<div>第一个界面</div>
<div>第二个界面</div>
<div>第三个界面</div>
</div>
<script>
class Tab{
constructor(id){
//1.选中摸一个区域内的元素
this.all = document.getElementById(id);
//2.获取所有的input
this.allInput = this.all.getElementsByTagName('input');
//3.获取所有的div
this.allDiv = this.all.getElementsByTagName('div');
this.init();
}
init(){
//4.为所有的input添加事件
for(let i=0;i<this.allInput.length;i++){
this.allInput[i].onclick = function(){
this.hide();
this.show(i);
}.bind(this);
}
}
//显示
show(index){
this.allInput[index].className = 'active';
this.allDiv[index].style.display = 'block';
}
//隐藏
hide(){
for(let i=0;i<this.allInput.length;i++){
this.allInput[i].className = '';
}
for(let j=0;j<this.allDiv.length;j++){
this.allDiv[j].style.display = 'none';
}
}
}
new Tab('first');
</script>
</body>
</html>