选项卡案例 ：面对对象 构造函数 高度封装函数

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li,ol{
            list-style: none;
        }
        .xuanxiangka{
            width: 400px;
            height: 350px;
            border: 1px solid red;
            margin: 100px auto;
        }
        ul{
            width: 100%;
            display: flex;
            height: 100px;
            background: aqua;
        }
        ul>li{
            flex: 1;
            height: 100%;
            text-align: center;
            line-height: 100px;
            background: rgb(21, 216, 234);
        }
        ul>li.gaoliang{
            background-color: chocolate;
        }
        ol{
            width: 100%;
            height: 250px;
          
            position: relative;
        }
        ol>li{
            width: 100%;
            height: 100%;
            font-size: 100px;
            display:flex ;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            display: none; 
             background-color: blueviolet;
        }
        ol>li.gaoliang{
            display: flex;
        }
    </style>

以上是html 标签  和css部分因为是高度封装的代码，所以要让html标签内的格式保持相同。

保持 以下格式   id可以换    ul>li里面的内容可以换    ol>li里面的内容可以换   样式可以换

 <div class="xuanxiangka" id="xuanxiangka">
        <ul>
            <li class="gaoliang">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="gaoliang">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

以下为js部分

<script>
        // +一个能够完成选项卡的对象，需要有哪些属性和方法
        // +属性：所有可以点击的按钮盒子
        // +属性所有可以切换的选项盒子
        // +方法：能添加点击事件的方法
        // 2.书写构造函数
        //  +能创建一个对象，包含两个属性和一个方法
        //  +属性直接卸载构造函数内
        //  +方法写在原型上
        function Gongchang(ele){
            // 获取范围，用this指向盒子本身
            this.ele=document.querySelector(ele);
            // 获取盒子没得按钮
            // 从盒子范围内寻找按钮，不从document内寻找 
            this.anniu=this.ele.querySelectorAll('ul>li');
            // 在盒子范围内找到所需要的切换显示的盒子
            this.hezi=this.ele.querySelectorAll('ol>li');
        }
        Gongchang.prototype.fangfa=function(){
            // 执行给所有的按钮里面添加点击事件
            // 但是怎么拿到anniu
            // 用变量t是可以访问到所有的anniu
            // console.log(t);
            // 但是变量t是我们随机创建的，如果创建的不是t是其他名字就不能使用
            // 又因为 this指向new前面的变量t所以可以直接用this代替
            for(var i=0;i<this.anniu.length;i++){
                // 提前保存索引
                this.anniu[i].setAttribute('suoyin',i);
                // 提前保存的this方便点击事件函数使用
                var _this=this;
                 this.anniu[i].onclick=function(){
                    // console.log('我被点击了')
                    // 需要让实例中的anniu里面都没有gaoliang类名
                    // 让切换的盒子也都没有gaoliang类名
                    // 但是这里不是fangfa的作用域了
                    // 在事件处理函数里面，this指向当前事件的事件源
                    // 这里的this指向的是anniu[i]
                    // 所以可以先提前保存一下fangfa中的this
                    // 为什么能访问到上个函数中的_this是因为这个函数中没有_this
                    // 他就会返回上一级中寻找是否存在_this
                   for(var j=0;j<_this.anniu.length;j++){
                    _this.anniu[j].className='';
                    _this.hezi[j].className='';
                   }
                   this.className='gaoliang';
                //   上面提前保存的索引就是再点击函数内切换盒子索引时使用。
                //    减0是因为获得的属性值是字符串，-0后转为数字型，才能进行下一步的索引
                var suoyin=this.getAttribute('suoyin')-0;
                // console.log(suoyin);
                _this.hezi[suoyin].className='gaoliang';
                // _this.hezi[2].className="gaoliang";
                 }

            }
        }

        

        var t=new Gongchang('#xuanxiangka');
        t.fangfa();
        console.log(t);

    </script>