选项卡,类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
        .box{
            width:400px;
            height:300px;
            border:10px solid #333;
            margin:50px auto;
        }
        ul,li,ol{
            list-style-type:none;
        }
        .box>ul{
            width:100%;
            height:40px;
        }
        .box>ul>li{
            width:calc(100% / 3);
            text-align:center;
            font-size:40px;
            height:100%;
            float:left;
            line-height:40px;
            background-color: grey;
            cursor:cell;
        }
        .box>ol{
            position:relative;
            width:100%;
            height:260px;
        }
        .box>ol>li{
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            line-height:260px;
            text-align:center;
            font-size:50px;
            background-color: indianred;
            display:none;
        }
        .box>ol>li.active{
            display:block;
        }
        .box>ul>li.active{
            background-color: indigo;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="active">11</li>
            <li>22</li>
            <li>33</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <div class="boxx box">
        <ul>
            <li class="active">11</li>
            <li>22</li>
            <li>33</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <script>
        function Tab(className,options={}){
            this.elem=document.querySelector(className)
            this.tabs=this.elem.querySelectorAll('ul>li')
            this.items=this.elem.querySelectorAll('ol>li')
            this.options=options
            this.fn()
        }

        Tab.prototype.fn=function(){
            this.tabs.forEach((value,index)=>{
                value.addEventListener(this.options.eventType || 'click',()=>{
                    this.tabs.forEach(value=>value.classList.remove('active'))
                    this.items.forEach(value=>value.classList.remove('active'))
                    value.classList.add('active')
                    this.items[index].classList.add('active')
                })
            })
        }
        new Tab('.box')
        new Tab('.boxx',{eventType:'mouseover'})
        // Tab.prototype.fn=function(){
        //     console.log(this)
        //     this.tabs.forEach(function(value){
        //         console.log(this)
        //         value.addEventListener('click',()=>{
        //             console.log(this)
        //         })
        //     })
        // }
    </script>
</html>