一、引言
各位朋友好，今天分享一个用前端三剑客完成的综合案例 —— Tab栏切换。在文章中我尽量把每个步骤都写详细，希望能对读者有所启示！同时文章中若涉及读者不了解的知识也希望自行查阅，笔者就不在此处班门弄斧了。
二、综合案例
1. Tab 栏切换
所需知识：HTML、CSS、JS(JavaScript 的基础语法 和 Web APIs的相关知识)
我们先简单做一个用于 Tab 栏切换的大盒子：
<!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>
<!-- 自定义属性：
<div data-id="0"></div>
<script>
console.log(document.querySelector('div').dataset.id) // 获取自定义属性0
</script> -->
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav h3 {
font-size: 24px;
font-weight: normal;
margin-left: 20px;
}
.tab-nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
height: 100%;
}
.tab-content .item {
display: none;
height: 100%;
}
.tab-content .item.active:nth-child(1) {
display: block;
background-color: pink;
}
.tab-content .item.active:nth-child(2) {
display: block;
background-color: skyblue;
}
.tab-content .item.active:nth-child(3) {
display: block;
background-color: green;
}
.tab-content .item.active:nth-child(4) {
display: block;
background-color: red;
}
.tab-content .item.active:nth-child(5) {
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>TITLE</h3>
<ul>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
这便是默认效果，关于下半部分的内容，我是用的彩色进行填充，读者可后续换成自己的内容，具体怎么显示和隐藏显然便是display: none; 和 display: block; 在控制 ，但更深层次的内容我们后续再讲。
读者不要急着复制代码哦，完整代码我都会附在后面的，请耐心看完~
接下来我们就进入具体用 JS(JavaScript) 控制的环节了
(1) 导航栏处超链接样式设置
核心思想是通过Web APIs 部分知识的内容去进行class的删除和替换
那话不多说，我们来进行相关操作吧！
这里首先得使用事件委托 —— 即获取父级，对父级进行操作（这样可以减少事件绑定的次数，以优化程序），我们找到 nav 处的具体标签来操作吧！
<script>
document.querySelector('ul').addEventListener('click', (e) => { // 绑定的是点击事件
console.log(e.target); // 先获取点击对象 ———— e.target
// 此时点击那一坨区域都会有输出，但我们的目的是想只点击 a 标签时才进行后续操作，所以这里我们用到 tagName 属性
if(e.target.tagName === 'A') { // 注意大写
// 只有点击 a 标签时才进行操作
// 先删除已经存在的效果
document.querySelector('.tab-nav .active').classList.remove('active')
// 添加点击效果
e.target.classList.add('active')
}
})
</script>
此处肯定有读者不理解：添加操作为什么是对 e.target 操作呢？理由如下：我们是对点击的对象才进行变色操作（绑定事件），如果我们用 :nth-child(N) 肯定是无法实现的，我们没办法知道点击的是第几个标签，for循环也排除掉了；但从事件对象 e 的角度出发去思考就不难解决这个问题，我们点击的就是事件对象e，即点击的就是目标锁定的 a 标签，所以我们只需要对事件对象进行事件绑定就行了
(2) 内容栏显示内容更换
在这里必须得用到自定义属性的知识：
<!-- 自定义属性：-->
<div data-id="0"></div>
<script>
console.log(document.querySelector('div').dataset.id) // 获取自定义属性0，但这里是字符串
</script>再给几个 li 标签绑定上对应的自定义属性：
<ul>
<li><a class="active" href="#" data-id="0">1</a></li>
<li><a href="#" data-id="1">2</a></li>
<li><a href="#" data-id="2">3</a></li>
<li><a href="#" data-id="3">4</a></li>
<li><a href="#" data-id="4">5</a></li>
</ul>同样也是先隐藏现有的，再进行目标的替换、添加操作：
<script>
document.querySelector('ul').addEventListener('click', (e) => { // 绑定的是点击事件
console.log(e.target); // 先获取点击对象 ———— e.target
// 此时点击那一坨区域都会有输出，但我们的目的是想只点击 a 标签时才进行后续操作，所以这里我们用到 tagName 属性
if(e.target.tagName === 'A') { // 注意大写
// 只有点击 a 标签时才进行操作
// 先删除已经存在的效果
document.querySelector('.tab-nav .active').classList.remove('active')
// 添加点击效果
e.target.classList.add('active')
// 内容栏进行操作
// 删除现有的
document.querySelector('.tab-content .active').classList.remove('active')
// 添加新的
const i = +e.target.dataset.id // e.target.dataset.id为字符串，要转成数字
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
}
})这下整体都完成啦，效果和完整代码如下：
<!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>
<!-- 自定义属性：
<div data-id="0"></div>
<script>
console.log(document.querySelector('div').dataset.id) // 获取自定义属性0
</script> -->
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav h3 {
font-size: 24px;
font-weight: normal;
margin-left: 20px;
}
.tab-nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
height: 100%;
}
.tab-content .item {
display: none;
height: 100%;
}
.tab-content .item.active:nth-child(1) {
display: block;
background-color: pink;
}
.tab-content .item.active:nth-child(2) {
display: block;
background-color: skyblue;
}
.tab-content .item.active:nth-child(3) {
display: block;
background-color: green;
}
.tab-content .item.active:nth-child(4) {
display: block;
background-color: red;
}
.tab-content .item.active:nth-child(5) {
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>TITLE</h3>
<ul>
<li><a class="active" href="#" data-id="0">1</a></li>
<li><a href="#" data-id="1">2</a></li>
<li><a href="#" data-id="2">3</a></li>
<li><a href="#" data-id="3">4</a></li>
<li><a href="#" data-id="4">5</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<script>
// 获取父级
const ul = document.querySelector('ul')
// 添加事件
ul.addEventListener('click', (e) => {
// console.log(e.target); // 我们点击的对象
// 我们只有点击了a才会进行添加类和删除类
// console.log(e.target.tagName); // 获取标签名
if(e.target.tagName === 'A') {
// console.log('我选的是a');
// 处理title
// 排他思想，先移除原来的active，给当前元素添加
document.querySelector('.tab-nav .active').classList.remove('active')
e.target.classList.add('active') // 因为我们点击的是e.target，所以给他加。这里不能用this，因为this指向的是ul
// 处理内容
console.log(e.target.dataset.id);
document.querySelector('.tab-content .active').classList.remove('active')
const i = +e.target.dataset.id // e.target.dataset.id为字符串，要转成数字
const divs = document.querySelector(`.tab-content .item:nth-child(${i + 1})`)
.classList.add('active')
}
})
</script>
</body>
</html>三、结语
感谢您的观看，同时希望您可以点赞、收藏以及关注支持一下，您的支持与喜爱是激励我继续写下去的最大动力！！！
后续还会有更多精彩内容，关注我，精彩不迷路~
扫一扫
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
