您现在的位置是：首页 > 文章详情

如何用原生JS写Tab切换

日期：2018-07-29点击：319收藏

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'); }

代码没有什么难度，非常基础，但是需要注意的一点是，在获取当前点击项的索引时，我们需要使用到闭包。