如何用原生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应用