本文详解如何使用JavaScript实现Tab栏切换效果。核心思路包括通过循环为每个li添加自定义索引属性，利用排他思想统一重置样式后高亮当前项，并根据点击的索引切换对应内容div的显示状态。
本文分享一个前端开发中常见且重要的案例：Tab栏切换效果。该效果不仅涉及顶部Tab栏本身的点击交互与样式变更，还要求Tab栏的状态能够联动控制下方对应内容板块的显示与隐藏。
运行效果展示：
如图所示，当用户点击顶部的Tab栏时，被点击的Tab项会应用特定的样式变化，同时其下方的内容区域也会同步切换，显示与当前Tab对应的具体内容。这种交互模式在前端应用中极为普遍，因此掌握其实现逻辑是前端开发者的必备技能。接下来直接展示相关代码。
此处省略CSS样式代码，开发者可根据实际需求自行编写。建议对li元素使用float布局进行排版。
HTML结构如下：
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li><!-- 默认选中第一个li，current是决定红底白字的样式的 -->
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;"><!-- 这个item是默认显示的，因为所有的item的display值都为none -->
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>以下是JavaScript核心代码：
<script>
// 业务需求：点击tab栏被点击的tab栏拥有不一样的样式，其下方的div也要跟着点击进行切换实现内容也跟着变动的效果
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var tabs = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('data-index', i); // 给每个li添加一个data-index的自定义属性，值是它们自己在lis中的下标，这个值主要让我们判断我们当前点击的是哪个li从而帮助我们后续修改它对应的div的display值
lis[i].onclick = function () {
// 1.第一步，用排他思想先做出用户点击谁就给谁class属性赋值，注意其他没有被点击的都需要操作它们的class值为空，这就是干掉其他人留下我自己的排他思想
for (var i = 0; i <lis.length; i++) {
lis[i].className = ''; // 用循环先将所有人（包括自己）的class类名为空
}
// 再单独给自己修改class类名即留下我自己
this.className = 'current'; // current这个类名的CSS样式是已经写好了的
// 然后上面的tab栏样式好了就要处理第二步就是点击谁就让其对应的下属div显示出来，其他没有被点击的就隐藏，这里主要是需要先知道用户点击的是谁，然后再给对象的div设置display为block即可。还是需用用排他思想来做哦
// 第二步：根据点击修改div的display属性值
var index = this.getAttribute('index'); // 获取当前被点击的li的index
for (var i = 0; i < lis.length; i++) { // 用循环让每个item的display都为none即干掉所有人
tabs[i].style.display = 'none';
}
// 在tabs中锁定li的index对应的item单独将它的display值改成block即留下我自己
tabs[index].style.display = 'block';
}
}
</script>补充说明实现步骤与核心思路（代码中已包含详细注释）：主要功能分为两步。第一步是处理li标签的样式，即当用户点击某个li时，该li的样式变为红底白字，而其他未被点击的li保持灰底黑字的默认样式。第二步是联动内容显示，下方放置了与li数量一一对应的div用于展示文字内容，但这些div的初始显示状态由Tab栏决定。为了实现div内容随li点击而变动，需要确定当前点击的是哪个li。这里采用的方法是通过循环遍历，利用lis[i].setAttribute('index', i)为每个li标签添加一个名为index的自定义属性，其值等于该li在lis数组中的索引。通过读取这个index值，即可确定当前点击的是第几个li，进而控制对应索引的div显示出来（建议结合代码注释阅读以更好理解）。
注意：这里补充说明“排他思想”。对于列表或表格等一组元素对象，通常可以统一获取并存入数组。当需要控制当前选中元素与其他未选中元素“有所不同”时，常采用排他思想。具体实现分两步：首先，通过循环遍历将所有元素（包括当前选中的）的样式或状态“重置”为默认状态，使它们看起来“都一样”，即消除之前的差异；其次，再为当前选中的元素添加特定的样式或功能（即“留下我自己”）。通过这两步操作，即可实现“选中谁，谁就与众不同”的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。