如何用原生JS寫Tab切換

1. 基本思路

① 周遊Tab選項

② 然後給每個Tab選項綁定點選事件

③ 每次點選時清除所有Tab選項及Tab選項内容的樣式，然後給目前Tab選項添加标記樣式，給目前Tab選項添加顯示樣式

2. 具體代碼實作

<!--HTML-->
<div id="tab">
    <!--Tab選項-->
    <div class="tab-nav">
        <a href="javascript:;" class="cur">選項1</a>
        <a href="javascript:;">選項2</a>
        <a href="javascript:;">選項3</a>
    </div>
    <!--Tab選項内容-->
    <div class="tab-content">
        <div class="content content1 cur">選項内容1</div>
        <div class="content content2">選項内容2</div>
        <div class="content content3">選項内容3</div>
    </div>
</div>
           

/*CSS*/
#tab{ width: 300px; margin: 30px auto;}
.tab-nav{ display: flex;}
.tab-nav a{ flex: 1; line-height: 40px; border: 1px solid #000; text-align: center; text-decoration: none; color: #000;}
.tab-nav a.cur{ color: #fff; background: #000;}
.content{ display: none; width: 100%; height: 300px; color: #fff; box-sizing: border-box; padding: 10px;}
.content.cur{ display: block;}
.content1{ background: #f00; }
.content2{ background: #0f0;}
.content3{ background: #00f;}
           

//Javascript
window.onload = function () {
    var oTab = document.getElementById('tab');
    var aTabNav = oTab.querySelectorAll('.tab-nav a');
    var aTabContent = oTab.querySelectorAll('.tab-content .content');
    for(var i = 0; i < aTabNav.length; i++){   // 周遊Tab選項
        aTabNav[i].onclick = (function (i) {   // Tab選項綁定點選事件
            return function () {
                // 清除所有Tab選項的标記樣式
                for(var j = 0; j < aTabNav.length; j++){
                    aTabNav[j].classList.remove('cur');
                }
                aTabNav[i].classList.add('cur');
                // 清除所有Tab選項内容的顯示樣式
                for(j = 0; j < aTabContent.length; j++){
                    aTabContent[j].classList.remove('cur');
                }
                aTabContent[i].classList.add('cur');
            }
        })(i);
    }
};
           

以上JS還可以繼續優化，将相同功能的代碼封裝成函數：

window.onload = function () {
    var oTab = document.getElementById('tab');
    var aTabNav = oTab.querySelectorAll('.tab-nav a');
    var aTabContent = oTab.querySelectorAll('.tab-content .content');
    for(var i = 0; i < aTabNav.length; i++){
        aTabNav[i].onclick = (function (i) {
            return function () {
                addCurClass(aTabNav,i);
                addCurClass(aTabContent,i);
            }
        })(i);
    }
};

function addCurClass(obj,index) {
    for(var i = 0; i < obj.length; i++){
        obj[i].classList.remove('cur');
    }
    obj[index].classList.add('cur');
}
           

代碼沒有什麼難度，非常基礎，但是需要注意的一點是，在擷取目前點選項的索引時，我們需要使用到

閉包

。

相關推薦

教你兩招用純CSS寫Tab切換 純CSS制作單頁Web應用 使用hash制作單頁Web應用