本文详细介绍如何使用JavaScript实现简单的Tab栏切换效果。通过结构分析，将页面分为选项卡与内容区两部分。核心逻辑利用排他思想，通过为li元素添加自定义索引属性，点击时遍历隐藏其他内容并显示对应模块，同时更新当前选项卡样式，实现交互切换。
本文分享了一个使用JavaScript实现的简易Tab栏切换代码示例，供读者参考学习。
功能需求：当用户点击上方的选项卡时，下方的页面内容需同步切换显示。
页面结构分析如下：
整体内容包裹在一个大的容器盒中，该容器内部划分为上下两个区域。
上方区域包含5个li元素，用于展示5个小选项卡，其中默认有一个处于选中状态。
下方区域包含5个div模块，其内容与上方选项卡一一对应；默认情况下，仅第一个div模块可见。
具体实现思路如下：
选项卡点击交互部分
Tab栏切换功能主要涉及两个核心模块。
1. 上方选项卡模块：点击任意一个选项卡时，需更新其样式，将背景色设为红色，字体颜色设为白色；其余选项卡保持原有样式不变（即应用排他思想）。
这一效果通过动态修改元素的类名来实现。
2. 下方内容模块：其显示状态需随上方选项卡的变化而改变，因此内容切换逻辑需封装在点击事件处理函数中。
关键规律：下方模块显示的内容与上方选项卡存在一一映射关系。
核心实现逻辑：为上方模块中的所有li元素添加自定义属性，属性值从0开始的索引号。
排他思想应用：利用for循环遍历数组元素，进入循环后首先清除所有模块的样式，随后为当前点击的模块添加高亮样式。
使用setAttribute（name，value）方法创建自定义属性，其中name指定属性名，value指定属性值。
使用getAttribute（name）方法获取元素的属性值，name为属性名称。
默认情况下，第一个选项卡对应的下方模块是可见的，需通过添加行内样式（style='display:block'）实现。由于CSS行内样式的优先级高于外部样式，该模块会优先显示。
代码中的（items[index].style.display = 'block';）语句同样起到了创建行内样式的作用。
具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab栏切换</title>
<style>
*{
margin:0;
padding:0;
}
.tab{
width:800px;
height:45px;
border:1px solid #ccc;
border-bottom:1px solid #c81623;
background: #fafafa;
position:relative;
margin:100px auto;
}
.tab_list li{
width:160px;
height:45px;
list-style:none;
line-height:45px;
text-align: center;
float:left;
}
.tab_list .current{
background-color:#c81623;
color:#fff;
}
.item{
width:800px;
height: 200px;
padding-top:40px;
/*line-height:200px;*/
font-size: 30px;
color:#fff;
text-align: center;
text-shadow:2px 2px 4px #000000;
background: #efefef;
/*opacity: 0.8;*/
top:47px;
position:absolute;
}
</style>
</head>
<body>
<div class='tab'>
<div class='tab_list'>
<ul>
<li class='current'>个性推荐</li>
<li>歌单</li>
<li>主播电台</li>
<li>排行榜</li>
<li>歌手</li>
</ul>
</div>
<div class='tab_con'>
<div class="item one" style='display:block'>每日歌曲推荐</div>
<div class="item two">精品歌单倾心推荐，给最懂音乐的你</div>
<div class="item thr">上瘾烟嗓情感之声</div>
<div class="item fou">新歌飙升榜</div>
<div class="item fiv">歌手排行榜</div>
</div>
</div>
<!-- tab 栏切换有2个模块
模块的选项卡，点击其中的某一个，被点击的这一个底色将变成红色的，其余的不变（排他思想）使用修改类的名称的方式。 -->
<!-- 下面显示模块内容，会随着上面的选项卡变化，所以下面模块变化写到点击事件里面。
规律：下面模块显示内容和上面的选项卡一一对应，相匹配。
-->
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
//for 循环绑定点击事件
for(var i=0;i < lis.length;i++){
lis[i].setAttribute('index',i);
lis[i].onclick = function() {
//
for(var i=0;i < lis.length;i++){
lis[i].className = '';
}
//留下现在需要用的
this.className = 'current';
//下面显示内容模块
var index = this.getAttribute('index');
console.log(index);
//去掉其他的 item，让这些隐藏起来
//只留下当前的 item，让它显示出来
for(var i=0;i<items.length;i++){
items[i].style.display='none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>最终运行效果如下：
点击其他选项卡时的状态
以上就是本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。