面向对象实现选项卡功能

<div class="container">
        <!-- 选项卡结构 -->
        <div class="control">
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
        </div>
        <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>

<script>
    function Table(btn_selector, content_selector) {
        this.btns = document.querySelectorAll(btn_selector);
          // 获取到选择按钮
        this.contents = document.querySelectorAll(content_selector);
      // 获取到选择内容
        this.index = 0;
          // 拿到索引
        this.bindEvent();
        // 调用已经初始化结束的功能
        this.changeTable();
        // 调用已经初始化结束的功能
    }
    Table.prototype.bindEvent = function () {
        // 实现事件绑定功能
        var self = this;
        for (var i = 0; i < self.btns.length; i++) {
            self.btns[i].index = i;
            //dom对象上记录的当前数据
            self.btns[i].onclick = function () {
                self.index = this.index;
                self.changeTable();
            }
        }
    }
    Table.prototype.changeTable = function () {
        // 实现点击切换内容功能
        var self = this;
        for (var j = 0; j < self.contents.length; j++) {
            self.contents[j].style.display = "none";
            // 先清空内容
        }
        self.contents[self.index].style.display = "block";
        // 点击的时候内容切换
    }
    var table = new Table(".control button", ".box");
</script>