html部分:
<div class="maxBox">
<div class="tBox">
<div class="bg" style="display: block;">btn1</div>
<div>btn2</div>
<div>btn3</div>
</div>
<div class="bBox">
<div class="bn">选项卡1</div>
<div>选项卡2</div>
<div>选项卡3</div>
</div>
</div>
js部分:
function fn(){
this.btn = document.querySelectorAll('.maxBox>.tBox>div')
this.box =document.querySelectorAll('.maxBox>.bBox>div')
}
fn.prototype.onj=function(){
this.btn.forEach((a,i)=>{
a.addEventListener('click',()=>{
this.btn.forEach((b,j)=>{
b.className=''
this.box[j].className=''
})
a.className='bg'
this.box[i].className='bn'
})
})
}
let ter= new fn()
ter.onj()
文章免费,自行理解。