<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="tab">
<div class="btns">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
</div>
<div class="boxs">
<div id="">
1
</div>
<div id="" style="display: none;">
2
</div>
<div id="" style="display: none;">
3
</div>
</div>
</div>
<div id="tab2">
<div class="btns">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
</div>
<div class="boxs">
<div id="">
1
</div>
<div id="" style="display: none;">
2
</div>
<div id="" style="display: none;">
3
</div>
</div>
</div>
<script type="text/javascript">
//字面量
// 构造函数
// 类
//架构师 主程
function Tab(sel,index=0){
//属性
// 方法
this.sel = sel;//父元素的选择器
this.el = document.querySelector(this.sel)
this.btns = this.el.querySelectorAll(‘.btns button‘)
this.boxs = this.el.querySelectorAll(‘.boxs div‘)
this.selectedIndex = index;
//给按钮加事件
//外部 this tab对象,对象方法内部 也是tab对象
this.btnsEvent = function(){
for(let i=0;i<this.btns.length;i++){
this.btns[i].onclick = function(){
console.log(i)
console.log(this)//btn 事件内部的this 就是 出发事件的元素
this.selectBtnOfIndex(i)
this.selectBoxOfIndex(i)
}.bind(this)
}
}
this.selectBtnOfIndex= function(index){
for(let i=0;i<this.btns.length;i++){
this.btns[i].style.color = ‘‘
}
this.btns[index].style.color = ‘red‘
}
this.selectBoxOfIndex= function(index){
for(let i=0;i<this.boxs.length;i++){
this.boxs[i].style.display = ‘none‘
}
this.boxs[index].style.display = ‘block‘
}
console.log(1)
this.selectBtnOfIndex(this.selectedIndex)
this.selectBoxOfIndex(this.selectedIndex)
this.btnsEvent()
}
let t = new Tab(‘#tab‘,1)
let t2 = new Tab(‘#tab2‘,0)
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/team-bali/p/11415337.html