一、前言
实现功能：
切换选项卡内容：点击不同的选项卡按钮时，会隐藏之前显示的选项卡内容，并显示当前点击按钮对应的选项卡内容。
实现逻辑：
-
在 HTML 中创建了两个ul盒子，分别用于显示选项卡按钮和选项卡内容。
-
默认显示第一个选项卡内容，即将第一个选项卡内容的 display 属性设置为 block。
-
通过 forEach 循环遍历选项卡按钮，给每个按钮添加点击事件监听器，当点击某个按钮时，隐藏之前显示的选项卡内容，然后显示当前点击按钮对应的选项卡内容。
-
给选项卡按钮添加样式，使其在被选中时呈现不同的效果。
二、项目运行效果
三、全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
</head>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
background-repeat: no-repeat;
}
.choice-box{
display: flex;
justify-content: space-between;
position: relative;
width: 700px;
height: 500px;
margin: 5% auto;
}
.choice{
float: left;
width: 14%;
height: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-around;
}
.choice li a{
display: block;
width: 100%;
height: 100%;
font-size: 22px;
color: #000;
transition: all 0.2s linear;
cursor: pointer;
}
.choice-con{
position: relative;
width: 80%;
height: 100%;
}
.choice-con li{
display: none;
width: 100%;
height: 100%;
position: absolute;
border-radius: 5%;
}
.choice-con li p{
line-height: 500px;
text-align: center;
font-size: 28px;
color: #fff;
}
</style>
<body>
<div class="choice-box">
<ul class="choice">
<li>
<a class="choice-1">粉色</a>
</li>
<li>
<a class="choice-2">绿色</a>
</li>
<li>
<a class="choice-3">蓝色</a>
</li>
<li>
<a class="choice-4">紫色</a>
</li>
<li>
<a class="choice-5">红色</a>
</li>
<li>
<a class="choice-6">黑色</a>
</li>
</ul>
<ul class="choice-con">
<!-- 下面li标签可以添加自己的内容和样式 -->
<li id="choice-1" style="background-color: pink">
<p>我是粉色！</p>
</li>
<li id="choice-2" style="background-color: aquamarine;">
<p>我是绿色！</p>
</li>
<li id="choice-3" style="background-color: #859aff;">
<p>我是蓝色！</p>
</li>
<li id="choice-4" style="background-color: blueviolet;">
<p>我是紫色！</p>
</li>
<li id="choice-5" style="background-color: tomato;">
<p>我是红色！</p>
</li>
<li id="choice-6" style="background-color: #000;">
<p>我是黑色！</p>
</li>
</ul>
</div>
</body>
<script>
let choice1 = document.querySelector('#choice-1');
choice1.style.display = 'block';
const choice = document.querySelector('.choice');
let choiceLis = choice.querySelectorAll('li');
choiceLis.forEach(function (li) {
li.addEventListener('click', function () {
if (choice1) {
choice1.style.display = 'none';
}
let aHref = this.querySelector('a').getAttribute('class');
let contID = aHref.slice(0);
let contDIv = document.getElementById(contID);
choice1 = contDIv;
contDIv.style.display = 'block';
})
})
let choiceAs = document.querySelectorAll('.choice a');
console.log(choiceAs);
choiceAs.forEach(function (a, index) {
a.addEventListener('click', function () {
choiceAs.forEach(function (link) {
link.style.fontSize = '';
link.style.letterSpacing ='';
});
this.style.fontSize = '35px';
this.style.letterSpacing ='10px';
});
// 判断是否是第一个 <a> 标签
if (index === 0) {
a.style.fontSize = '35px';
a.style.letterSpacing ='10px';
}
});
</script>
</html>四、答疑解惑
这是一个非常适合练习JavaScript的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。
还多请各位小可爱多多点赞支持，你们的支持是我最大的动力。
博主VX：18884281851
谢谢各位的支持~~