https://www.jianshu.com/p/9639c71898bb这是我之前用jq写的选项卡，为了解决时间（你明明就是懒），我们直接套用以前的布局，直接上手ES6。
页面图
首先，我们直接定义一个类Tab，写上构造方法constructor，构造方法在new的时候会直接调用，构造方法作用就是对类进行初始化。（在Java里，构造方法和类名一样，new对象的时候，会直接调用类的无参方法。
），在JavaScript里，构造方法必须写成constructor。
class Tab{
constructor(tab,content){
/*this.tab = document.getElementsByClassName('tab');
this.content = document.getElementsByClassName('content');*/
this.tab = document.getElementsByClassName(tab);
this.content = document.getElementsByClassName(content);
this.init();
}
}
关于this的指向：
在类里，this指向类的实例。
在方法里，this指向调用者。
而箭头函数（在java里是lambda表达式），()=>，没有自己的this，es6箭头函数里的this是外层代码（定义时，非执行时！！！重点！）this的引用。比如你鼠标点击调用事件，this便是执行时。这个要多熟练才能掌握。
选项卡的原理：点击的元素，以及对应的部分显示。其他隐藏。所以我们每次点击的时候，可以让所有隐藏，然后再让点击的显示，这就是思路。所以我们先点击的时候遍历：
init(){
//let _index = this.index;
for (let i=0;i{
this.hide();
this.show(i);
})
}
}
show(index){
this.tab[index].classList.add('on');
this.content[index].classList.remove('hide');
this.content[index].classList.add('show');
}
hide(){
for(let i=0;i 于是一个选项卡功能就完成了。
源码如下：
new Tab('tab','content');这里的tab和content可以换成自己对应的class类名。这就是封装好的选项卡功能。