JavaScript高级-----2.面向对象(案例 Tab栏切换)

4. 面向对象案例

• 第一步

class Tab {
    constructor(id) {
        //获取元素
        this.main = document.querySelector(id); //最大的Tab盒子
        this.lis = this.main.querySelectorAll('li'); //大盒子里面的li
        this.sections = this.main.querySelectorAll('section');
        this.init();//new的时候自动调用 用于测试代码console.log(this.index);是否可以打印正确的索引号
    }

    //初始化模块 让相关的元素绑定事件
    init() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = function() {
                console.log(this.index);
            }
        }
    }

    //1. 切换功能
    toggleTab() {}

    //2. 添加功能
    addTab() {}

    //3. 删除功能
    removeTab() {}

    //4. 修改功能
    editTab() {}
}

//页面中可能会有很多Tab都需要使用这个功能，那就可以实例化不同的对象。
var tab = new Tab('#tab');

• 第二步

class Tab {
    constructor(id) {
        //获取元素
        this.main = document.querySelector(id); //最大的Tab盒子
        this.lis = this.main.querySelectorAll('li'); //大盒子里面的li
        this.sections = this.main.querySelectorAll('section');
        this.init();
    }

    //初始化模块 让相关的元素绑定事件
    init() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab; //点击之后调用函数toggleTab()
        }
    }

    //1. 切换功能
    toggleTab() {
        console.log(this.index); //这个this指向当前的li,每个li都有一个index属性
    }

    //2. 添加功能
    addTab() {}

    //3. 删除功能
    removeTab() {}

    //4. 修改功能
    editTab() {}
}

//页面中可能会有很多Tab都需要使用这个功能，那就可以实例化不同的对象。
var tab = new Tab('#tab');

• 第三步
  ```