面向对象实现选项卡

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()

文章免费，自行理解。