JS基础案例-tab栏切换（附详细代码）

洪七公 · 发表于 2023-2-2 18:34:53

今天做了一个tab栏切换案例，在此将代码以及实现的过程记录下来，希望与小伙伴们一起交流学习！！！

实现思路：
（1）整个tab栏是由2个div模块组成，分别是头部选项栏和中间内容模块（蓝色框）。

（2）头部选项栏点击其中任意一个，当前点击的一栏底色及字体颜色发生改变，其余不变。用排他思想实现。

（3）用for循环为头部选项栏所有元素绑定点击事件。

（4）中间的内容模块会跟随选项栏变化，因此显示隐藏的模块要放在点击事件的里边。且要满足：中间模块显示的内容要和上面的选项栏一一对应。

（5）最终达到的效果为：当我们点击头部选项栏，中间内容模块会显示对应的图片，其余的图片则会隐藏(排他思想）。

需要注意的点：1、我们一开始是将中间内容模块隐藏，此时需要在中间内容模块中添加一个展示类，使得中间模块在默认状态下内容不为空。2、由于我们采用了document.querySelectorAll()来获取元素，因此获取到的头部选项栏和中间内容模块的所有元素，类型是下标为0开始的列表，由此来实现一一对应匹配。

案例整体框架和效果图展示如下：

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 600px;
margin: 100px auto;
}
.box-top {
overflow: hidden;
width: 400px;
background-color: whitesmoke;
}
.box-top ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
.tab li.active {
background-color: #ccc;
color:peru;
}
.box-middle {
margin-top: 0;
}
.box-middle .item {
display: none;
float: left;
}
.box-middle .item.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="box-top">
<ul class="tab">
<li class="tab-item active">第一张</li>
<li class="tab-item">第二张</li>
<li class="tab-item">第三张</li>
<li class="tab-item">第四张</li>
</ul>
</div>
<div class="box-middle">
<div class="item active"> //默认展示页面
<a href="###"><img src="./image/1.jpg" alt=""></a>
</div>
<div class="item">
<a href="###"><img src="./image/2.jpg" alt=""></a>
</div>
<div class="item">
<a href="###"><img src="./image/3.jpg" alt=""></a>
</div>
<div class="item">
<a href="###"><img src="./image/4.jpg" alt=""></a>
</div>
</div>
</div>
<script>
// 1、获取相应的元素
let list = document.querySelectorAll('.tab .tab-item')
let items = document.querySelectorAll('.box-middle .item')
// 2、用for循环为tab栏所有元素添加点击事件头部tab栏切换模块(排他思想)
for (let i = 0; i < list.length; i++){
list[i].addEventListener('click',function(){
document.querySelector('.tab .active').classList.remove('active')
this.classList.add('active')
// 3、底部显示隐藏模块要放在点击事件的里边
// 3.1、先移除
document.querySelector('.box-middle .active').classList.remove('active')
// 3.2 点击哪个按钮就显示对应的底部模块
items[i].classList.add('active') // 中间模块展示图片和上面的选项栏一一对应
})
}
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			会员注册

[CSS/Html] JS基础案例-tab栏切换（附详细代码）