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');
}
代码没有什么难度，非常基础，但是需要注意的一点是，在获取当前点击项的索引时，我们需要使用到闭包。