javaScript进阶面向对象ES6-2020-01-06

p13tab切换功能模块-2020-01-06

图片.png

点击才调用所以不需要加小括号
我们拿到索引值,是测试我们这样写到底对不对,我们需要的是点击我们的tab栏然后让下面的内容出现,所以我们只需要调用toggletab的模块即可

图片.png
图片.png

点击谁当前样式添加其余的兄弟移除的样式

 constructor(id) {
    that = this;
    this.main = $(id);
    this.lis = $("li");
    this.sections = $("section");
    this.init();
  }
  init() {
    //页面已加载,相关绑定事件就启动
    // init 初始化操作让相关的元素绑定事件
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
    }
  }
  // crud功能:根据需求
  toggleTab() {
    // console.log(this.index); //=>this指向当前的lis也就是li
    // 点谁当前的谁就添加
    that.clearClass();
    this.className = "liactive";
    // console.log(this);
    that.sections[this.index].className = "conactive";
  }
  clearClass() {
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].className = "";
      this.sections[i].className = "";
    }
  }

这里注意一点🔥:就是this指向问题,其它没问题,谁调用this指向谁,如果你li或者tab 点击this就指向了tab但是,tab是私有属性方法,没有访问全局能力,所以我们需要用that,而that一开始就等于了#tab

图片.png
图片.png

this指谁?当前实例而不是lis

清除其他人的样式:

图片.png