主要用到classList来反复增加删除已经设置好的背景属性
elem.classList.add / remove(class) — 添加 / 移除类。
html
<div class="warp">
<p class="active">商品介绍</p>
<p>规格与包装</p>
<p>售后保障</p>
<p>商品评价(50000)</p>
<p>手机社区</p>
</div>
<div class="desc">
<p style="display:block;">商品介绍模块内容</p>
<p>规格与包装模块内容</p>
<p>售后保障模块内容</p>
<p>商品评价(50000)模块内容</p>
<p>手机社区模块内容</p>
</div>
css
* {
padding: 0;
margin: 0;
}
.warp {
width: 1000px;
height: 50px;
background-color: #f1f1f1;
border: 1px solid #000;
margin: 100px auto 0px;
}
.warp p {
float: left;
text-align: center;
padding: 0 20px;
line-height: 50px;
}
.warp p.active {
background-color: tomato;
color: #fff;
}
/* 提前设置好背景色和颜色,激活的时候把类名加上 */
.warp p:nth-child(5)::after {
contain: "";
clear: both;
}
.desc {
width: 1000px;
margin: auto;
}
.desc p {
display: none;
}
js部分
var mainpSea = document.querySelectorAll(".warp p");
var descpSea = document.querySelectorAll(".desc p");
for (var i = 0; i < mainpSea.length; i++) {
mainpSea[i].num = i //把索引提取出来
mainpSea[i].onclick = function() {
for (var j = 0; j < mainpSea.length; j++) {
mainpSea[j].classList.remove("active"); //每一遍都把所有的背景都删除
}
this.classList.add("active") //再在点击的元素上添加类名
for (var k = 0; k < mainpSea.length; k++) {
descpSea[k].style.display = "none" //把下面所有的元素都隐藏
}
descpSea[this.num].style.display = "block" //对应索引的元素出现
}
}