tab栏切换

原生tab栏切换

css

<style>
    .box {
        width: 400px;
        margin:100px auto;
        border:1px solid #ccc;
    }
    .top button.purple {
        background-color: purple;
    }
    .bottom div{
        width:100%;
        height: 300px;
        background-color: pink;
        display: none;
    }
    .bottom div.show{
        display:block;
    }

</style>

html

<div class="box">
    <div class="top" id="top">
        <button class="purple">第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
        <div class="show">1号盒子</div>
        <div>2号盒子</div>
        <div>3号盒子</div>
        <div>4号盒子</div>
        <div>5号盒子</div>
    </div>
</div>

js

<script>
    function Tab(){
        this.btns = document.getElementById("top").children;
        this.divs = document.getElementById("divs").children;
        this.init = function(){
            for(let i = 0; i < this.btns.length; i++){
                this.btns[i].onclick = function(){
                    this.clearAll();
                    this.showFn(i);/
                }.bind(this)
            }
        }
        this.clearAll = function(){
            for(var i = 0; i < this.btns.length; i++){
                 this.btns[i].className = "";
                 this.divs[i].className = "";
            }
        }
        this.showFn = function(index){
            //this是实例， 看showFn执行有没有点，有点，showFn点前面的this；点前面的this是实例
            this.btns[index].className = "purple";
            this.divs[index].className = "show"
        }
    }
    var res = new Tab();
    res.init();
</script>