爱站程序员基地html部分
<div class=\”container\”>
<a href=\”#\” class=\”item active\” data-id=\”1\”>按钮1</a><a href=\”#\” class=\”item\” data-id=\”2\”>按钮2</a>
<div class=\”box active box1\”>盒子1</div>
<div class=\”box box2\”>盒子2</div>
</div>
css部分
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.container{
width: 400px;
border: 1px solid #ff6700;
margin: 100px auto;
}
.item{
display: inline-block;
width: 200px;
height: 40px;
line-height: 40px;
background-color: lightblue;
text-align: center;
color: yellow;
}
.item.active{
background-color: lightgreen;
}
.box{
width: 400px;
height: 200px;
background-color: orange;
display: none;
}
.box:first-of-type{
background-color: lightcoral;
}
.box.active{
display: block;
}
js部分
let tabs = document.querySelectorAll(\”.item\”);
//遍历所有的tabs
tabs.forEach(function(item){
//给每一个item绑定事件
item.addEventListener(\”click\”,function(e){
// e.preventDefault();
// 如果点击的item已经具有active类名不需要做任何操作
if(!item.classList.contains(\”active\”)){
// 将具有active类名的item的active类名去掉
document.querySelector(\”.item.active\”).classList.remove(\”active\”);
// 给item添加上active类名
item.classList.add(\”active\”);
// 让当前显示的box隐藏
document.querySelector(\”.box.active\”).classList.remove(\”active\”);
// 让对应的新的box显示
let dataId = item.dataset.id;
document.querySelector(\”.box\”+dataId).classList.add(\”active\”);
}
});
});
