1.1 任务目标
实现点击按钮,切换不同的Tab
1.2 任务说明
要求基本还原界面
2.1 任务实现
界面是左右布局,左边是按钮,右边是文本列表
2.1.1 代码实现
<!DOCTYPE html>
<html lang="zh">
<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>切换</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.left-box{
float: left;
margin: 10px;
}
.btn{
width: 90px;
height: 30px;
border-radius: 5px;
border: 2px solid orangered;
background-color: white;
margin: 5px;
}
.active{
background-color: orangered;
}
.content{
float: left;
margin-top: 14px;
width: 400px;
height: 200px;
border: 2px solid orangered;
border-radius: 5px;
}
.item{
line-height: 50px;
margin-top: 40px;
margin-left: 20px;
font-size: large;
display: none;
}
.item:first-of-type{
display: block;
}
.item p{
color: orangered;
font-size: small;
margin-top: -10px;
}
</style>
</head>
<body>
<main>
<section class="left-box">
<button class="btn active">初级</button><br>
<button class="btn">中级</button><br>
<button class="btn">高级</button><br>
</section>
<section class="right-box">
<div class="content">
<ul>
<li class="item"> <b>C1认证介绍</b> <p>了解更多>></p> </li>
<li class="item"> <b>C4认证介绍</b> <p>了解更多>> </p></li>
<li class="item"> <b>C5认证介绍</b> <p>了解更多>></p> </li>
</ul>
</div>
</section >
</main>
<script>
var btn = document.querySelectorAll('.btn');
var item = document.querySelectorAll('.item');
for(let i = 0; i<btn.length;i++)
{
btn[i].addEventListener('click',function()
{
this.classList.add('active');
item[i].style.display = 'block';
for(let j = 0; j < item.length;j++)
{
if(j !== i)
{
btn[j].classList.remove('active');
item[j].style.display = 'none';
}
}
})
}
</script>
</body>
</html>
2.1.2 成果展示