EcmaScript6实现选项卡

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

于是一个选项卡功能就完成了。
源码如下：

    
        
        
        
    
    
        

            

                

                    
选项卡1切换
                    
选项卡2切换
                    
选项卡3切换
                
            
            

                

                    我是选项卡1切换

                    我是选项卡1切换

                    我是选项卡1切换

                    我是选项卡1切换

                
                

                    我是选项卡2切换

                    我是选项卡2切换

                    我是选项卡2切换

                    我是选项卡2切换

                
                

                    我是选项卡3切换

                    我是选项卡3切换

                    我是选项卡3切换

                    我是选项卡3切换

                
            
        
        
    

new Tab('tab','content');这里的tab和content可以换成自己对应的class类名。这就是封装好的选项卡功能。