面向对象tab切换

 <style type="text/css">
     * {
         margin: 0;
         padding: 0;
         list-style: none;

         /* css实现禁止文字选中: */
         -webkit-touch-callout: none;
         /* iOS Safari */
         -webkit-user-select: none;
         /* Chrome/Safari/Opera */
         -khtml-user-select: none;
         /* Konqueror */
         -moz-user-select: none;
         /* Firefox */
         -ms-user-select: none;
         /* Internet Explorer/Edge */
         user-select: none;
     }

     h4 {
         margin: 0 auto;
         text-align: center;
         font-size: 60px;
     }

     .tabsbox {
         width: 880px;
         height: 500px;
         border: 1px solid red;
         margin: 10px auto;
     }

     .firstnav {
         width: 100%;
         height: 70px;
         border-bottom: 1px solid #ccc;
         position: relative;

     }

     .firstnav ul {
         float: left;
     }

     .firstnav li {
         float: left;
         height: 70px;
         padding: 0 30px;
         border-right: 1px solid #ccc;
         position: relative;
         cursor: pointer;
     }

     .firstnav span {
         line-height: 70px;
     }

     span.icon-guanbi {
         position: absolute;
         right: 0;
         top: 0;
         line-height: 1;
         cursor: pointer;
     }

     .firstnav .tabadd {
         float: right;
         border: 1px solid #ccc;
         position: absolute;
         top: 50%;
         right: 10px;
         transform: translateY(-50%);
         cursor: pointer;
     }

     .firstnav .tabadd span {
         display: block;
         width: 30px;
         height: 30px;
         line-height: 30px;
         text-align: center;
     }

     .firstnav li.liactive {
         border-bottom: 1px solid #fff;
     }


     .tabscon {
         padding: 20px;
         height: 430px;
         box-sizing: border-box;
     }

     .content {
         width: 100%;
         height: 100%;
     }

     input {
         width: 80px;
         height: 40px;
     }
 </style>

 <div class="tabsbox" id="tab">
     <!-- 顶部标题 -->
     <nav class="firstnav">
         <ul>
             <li class="liactive"><span>测试1</span></li>
             <li><span>测试2</span></li>
             <li><span>测试3</span></li>
         </ul>
     </nav>
     <!-- tab内容 -->
     <div class="tabscon">
         <div class="content">测试1对应的内容</div>
         <div class="content" style="display: none;">测试2对应的内容</div>
         <div class="content" style="display: none;">测试3对应的内容</div>
     </div>
 </div>
 <script>
 
    // 通过案例
    // 1. 面向对象和面向过程编程思想的差异
    // 2. 面向对象编程思想的特点
    

    //面向对象实现思路
    //a): 找对象
    //b): 给对象设置属性和方法


    //具体思路:
    // 1): 先将整个tab栏封装成一个对象
    // 2): 对象身上有切换功能(方法)
    // 3): 页面中的按钮其实就是tab栏对象身上的属性

    //具体的代码实现:
    let that;
    class Tab {
        //设置属性
        constructor() {
            //将实例对象的this保存到变量that中
            that = this;
            //所有的li
            this.lis = document.querySelectorAll('.firstnav li');
            //所有的内容
            this.contents = document.querySelectorAll('.content');
        }
        //封装一个方法,用来给元素注册事件
        init() {
            //给页面中所有的li标签注册点击事件
            for(let i = 0; i < this.lis.length; i++) {
                 //遍历每一个li的时候,将索引号记录到当前li身上
                 this.lis[i].myindex = i;
                 //给每一个li注册点击事件
                 //每一个点击事件中,是不是要执行切换这个功能,那么调用toggle方法
                 this.lis[i].onclick = this.toggle;
            }
        }
        //切换功能
        toggle() {
            // this: 当前事件源li标签
            // 先将样式清空
            that.clearStyle();
            //1. 先给当前点击的li标签设置一个样式
            this.className = 'liactive';

            //点击对应的li,要显示对应的内容
            // 先获取当前标签的索引值
            let index = this.myindex;

            // 按照索引号去找对应的内容
            that.contents[index].style.display = 'block';
        }
        //封装一个函数,用来专门实现清空样式的
        clearStyle() {
            for(let i = 0; i < this.lis.length; i++) {
                this.lis[i].className = '';
                this.contents[i].style.display = 'none';
            }
        }
    }
    //通过类创建了一个对象
    let tab = new Tab();
    //调用
    tab.init();   

 </script>