面向对象实现选项卡功能

<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> 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值