JS 面向过程和面向对象实现 Tab选项卡切换

• html布局和css样式在最下
  基本效果如图：
  

---

1、面向过程

    1. 找到所有的按钮
    2. 给按钮添加事件
    3. 根据按钮的下标显示对应的内容

    <script>
        // 1. 找到所有的按钮
        var btns = document.querySelector(".btns").children;
        var boxs = document.querySelectorAll(".box")

        for(var i = 0 ; i < btns.length ; i ++){
            // 2. 给按钮添加事件 鼠标点击
            btns[i].onclick = function(){
                // 删除掉元素的类名active
                removeClass( btns , "active"); 
                // +=是为了不覆盖原有的class名字
                this.className += " active";
                /*获取当前元素的下标
                循环绑定事件的时候，不能在事件处理函数之中使用i获取，
                    因为for循环是在循环结束之后，才会执行事件。此时的i是循环结束的i
                所以 此处用this来指向当前发生事件的元素
                */
                // 如果this和btns里面的某一项相等了，那么就判断下标是对应的下标
                for(var k = 0 ; k < btns.length ; k ++){
                    // for循环找到所有的按钮
                    // 如果button是this对应的button
                    if(btns[k] === this){
                        break;
                    }
                }
                // 3.根据按钮的下标显示对应的内容
                removeClass( boxs , "active"); 
                boxs[k].className += " active";
            }
        }

        // 删除元素的active类名
        function removeClass( ele_list , class_Name){ //元素组，类名
            // 遍历整个元素组
            for(var i = 0 ; i < ele_list.length ;i ++){
                // 首先 找到className字符串，把它的类名拆分成数组
                var class_arr = ele_list[i].className.split(" ");
                // 找到对应的类名
                var index  = class_arr.indexOf(class_Name);
                // 如果存在这个类名，就删除掉这个class名
                if(index !== -1){
                    class_arr.splice( index , 1);
                    // 类名再赋值  数组变为字符串
                    ele_list[i].className = class_arr.join(" ");
                }
            }
        }
    </script>

---

2、面向对象

1、OOA 面向对象分析
     1)选择元素
     2)事件添加器  把功能变成工具
     3)下标获取器
     4)类名清除器
     5)类名添加器
     
2、OOD 面向对象设计
    // 构造函数
    function Table(){

    }
    // 初始化功能
    Table.prototype.init = function(){
        // 选择元素调用
        // 调用bindEvent功能
    }

    // 元素选择功能
    Table.prototype.$ = function(){

    }
    
    // 事件添加功能
    Table.prototype.bindEvent = function(){
        // 获取下标
        // 使用类名清除器
        // 使用类名添加器
    }

    // 下标获取器
    Table.prototype.getIndex = function(){

    }

    // 类名清除器
    Table.prototype.clearClass = function(){

    }

    // 类名添加器
    Table.prototype.addClass = function(){

    }

    <script>
        // 3、OOP 面向对象编程
        function Table(){}
        // 初始化
        Table.prototype.init = function( options ){
            // 选择元素调用
            this.btns = this.$(options.btn);
            this.contents = this.$(options.content);
            // 调用事件添加功能
            this.bindEvent();
        }
        // 元素选择
        Table.prototype.$ = function( selector ){
            return document.querySelectorAll(selector);
        }
        // 事件添加
        Table.prototype.bindEvent = function(){
            for(var i = 0 ; i < this.btns.length ; i ++){
                this.btns[i].addEventListener("click" , function( index ){
                    // 类名清除
                    this.clearClass();
                    // 类名添加
                    this.addClass( index );
                }.bind(this , i))//this指向实例对象，同时获取下标
            }
        }
        // // 下标获取器   用bind也能获取
        // Table.prototype.getIndex = function(){

        // }
        // 类名清除器
        Table.prototype.clearClass = function(){
            for(var k = 0; k < this.btns.length; k ++){
                this.btns[k].className = this.btns[k].className.replace(/\s?active/g,"");
                this.contents[k].className = this.contents[k].className.replace(/\s?active/g,"");
            }
        }
        // 类名添加器
        Table.prototype.addClass = function( index ){
            this.btns[index].className += " active"
            this.contents[index].className += " active"
        }

        var table = new Table();
        table.init({
            btn:".btn",
            content : ".box"
        });
    </script>

---

HTML布局

    <div class="container">
        <div class="btns">
            <button data-index="0" class="btn active">1</button>
            <button data-index="1" class="btn">2</button>
            <button data-index="2" class="btn">3</button>
        </div>
        <div class="content">
            <div class="box active">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </div>

CSS样式

    <style>
        .container{
            width: 360px;
            height: 277px;
            border: 10px solid #000;
            overflow: hidden;
            margin: 0 auto;
        }
        .content{
            height: 257px;
            text-align: center;
            line-height: 257px;
            font-size: 100px;
            position: relative;
        }
        .box{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #fff;
            display: none;
        }
        button.active{
            color: aliceblue;
            background: black;
        }
        .box.active{
            display: block;
            z-index: 1;
        }
    </style>