Tab选项卡案例

方法一：
tab选项卡
第一步：获取元素
2.给每个按钮添加点击事件（ 第一个按钮对应下面的第一块内容，依次类推。）
3.循环里面包含事件，事件里面的i是循环的最后一次的值
4.里面的for代表给当前点击的元素添加类名之前，去掉其他button上面的类名
5.获取按钮上面的自定义属性，通过属性找到你这个按钮是那一块

<style>
  .tab .content {
            border: 1px solid #ccc;
            width: 300px;
            height: 100px;
            display: none;
        }

        .tab button.active {/* 当前选中的按钮 加上标记*/
            background-color: red;
        }
</style>
 <div class="tab">
        <button class="active" a=0>html</button>
        <button a=1>css</button>
        <button a=2>javascript</button>
        <div class="content" style="display: block;">
            html
        </div>
        <div class="content">
            css
        </div>
        <div class="content">
            javascrpt
        </div>
    </div>
    <script>
    //获取元素
    var oBtn = document.querySelectorAll('.tab button');
    var aContent = document.querySelectorAll('.tab .content');

    for (i = 0; i < oBtn.length; i++) {
        oBtn[i].onclick = function () {//给按钮绑上点击事件
            for (j = 0; j < oBtn.length; j++) {//去掉所有按钮上的类名
                oBtn[j].className = '';
                aContent[j].style.display = 'none';
            }
            this.className = 'active';//|this|当前点击的按钮
             //通过当前点击的按钮来找当前那块内容显示。
            aContent[this.getAttribute('a')].style.display = 'block';
        }
    }
</script>

改写:箭头函数（ 箭头函数是函数的一种简洁的写法，顺便将函数里面的this固有化，箭头函数里面的this不会发生变）
总结：
箭头函数不适合复杂的逻辑,适合简单的逻辑，数组的新方法(回调函数)
最外层尽力不要使用箭头函数，污染全局对象window
箭头一定是匿名函数
箭头函数里面没有arguments,也不能new调用。

 全局变量改成属性，全局函数变成方法
 注意this的指向。
 function Tab(selector) {
            //this:实例对象
            this.tab = document.querySelector(selector);//获取父元素
            this.btns = this.tab.querySelectorAll('button');//属性
            this.contents = this.tab.querySelectorAll('.content');//属性
        }

        Tab.prototype.init = function () {//初始化
            for (let i = 0; i < this.btns.length; i++) {
                this.btns[i].onclick = () => {//箭头函数里面的this来自于父级。
                    for (let j = 0; j < this.btns.length; j++) {
                        this.btns[j].className = '';
                        this.contents[j].style.display = 'none';
                    }
                    this.btns[i].className = 'active';
                    this.contents[i].style.display = 'block';
                }
            }
        }
         // let t1 = new Tab();
  		 // t1.init();
  		 //简写（合一起了！！）
  		new Tab('.tab').init();
        new Tab('.tab1').init();