一、初始化html結構

<div class="tab" id="tab">
    <span class="active">工作日</span>
    <span>休息日</span>
</div>
<div class="tabdiv">
    <div class="tabpane">
        11111111111
    </div>
    <div class="tabpane">
        22222222
    </div>
</div
 
>

二、js程式碼

var span = document.querySelectorAll('#tab span'),       //css選擇器
    div = document.querySelectorAll('.tabpane');

for(var i=0;i<span.length;i++){                   //迴圈span標籤
    span[i].idx = i;                                    
//給span一個自定義的idx屬性，將I賦值進去，因為下邊的迴圈不能直接拿到這個迴圈的i
    span[i].onclick = function
 
(){
        for(var j=0;j<div.length;j++){         //迴圈div標籤
            div[j].style.display = 'none';    //每次點選都先隱藏掉div，並移除class
            span[j].classList.remove('active');
        }
        div[this.idx].style.display = 'block';           //給當前div顯示出來
        this.classList.add('active');                      //增加class
 

    }
}