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.tab.length;i++) {
/*this.liContent[i].onclick = function(){
this.hide();
this.show(i);
}.bind(this);*/
this.tab[i].addEventListener('click',()=>{
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<this.tab.length;i++){
this.tab[i].classList.remove('on');
this.content[i].classList.remove('show');
this.content[i].classList.add('hide');
}
}
于是一个选项卡功能就完成了。
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
li {
list-style: none;
}
#main {
width: 600px;
height: 300px;
}
#tab-menu {
width: 600px;
height: 50px;
margin: 0;
}
#tab-menu>ul {
width: 600px;
height: 50px;
padding: 0;
}
#tab-menu>ul>li {
border: 0;
display: inline-block;
padding: 0;
height: 50px;
line-height: 50px;
background-color: #FF9933;
color: #fff;
width: 200px;
text-align: center;
margin: 0 -10px 0 0;
}
.on {
background-color: #FF6600 !important;
}
#tab-content>div {
width: 598px;
height: 550px;
border: 1px solid #DDDDDD;
margin: 0;
padding: 0;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="main">
<div id="tab-menu">
<ul>
<li class="tab on">选项卡1切换</li>
<li class="tab">选项卡2切换</li>
<li class="tab">选项卡3切换</li>
</ul>
</div>
<div id="tab-content">
<div class="content show">
我是选项卡1切换</br>
我是选项卡1切换</br>
我是选项卡1切换</br>
我是选项卡1切换</br>
</div>
<div class="content hide">
我是选项卡2切换</br>
我是选项卡2切换</br>
我是选项卡2切换</br>
我是选项卡2切换</br>
</div>
<div class="content hide">
我是选项卡3切换</br>
我是选项卡3切换</br>
我是选项卡3切换</br>
我是选项卡3切换</br>
</div>
</div>
</div>
<script>
{
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();
}
init(){
//let _index = this.index;
for (let i=0;i<this.tab.length;i++) {
/*this.liContent[i].onclick = function(){
this.hide();
this.show(i);
}.bind(this);*/
this.tab[i].addEventListener('click',()=>{
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<this.tab.length;i++){
this.tab[i].classList.remove('on');
this.content[i].classList.remove('show');
this.content[i].classList.add('hide');
}
}
}
new Tab('tab','content');
}
</script>
</body>
</html>
new Tab('tab','content');这里的tab和content可以换成自己对应的class类名。这就是封装好的选项卡功能。
