使用html,css, jquery写
html
<div class="tabbox">
<ul class="tab">
<li class="active" id="">111111111111</li>
<li id="0">22222222222222222</li>
<li id="1">3333333333333</li>
<li id="2">44444444444444444</li>
<li id="3">55555555555555555555</li>
</ul>
</div>
<ul class="discount">
<li class="active">
<div class="mlists">
111111111111111
</div>
</li>
<li>
<div class="mlists">
22222222222222222222
</div>
</li>
<li>
<div class="mlists">
33333333333333333
</div>
</li>
<li>
<div class="mlists">
4444444444444444444444
</div>
</li>
<li>
<div class="mlists">
5555555555555555555555555
</div>
</li>
</ul>
js
$(".tab li").each(function (index, item) {
$(this).click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
})
css
.discount li{
display:none;
}
.discount li.active{
display: block;
}
.tabbox{
height:0.84rem;
background:rgba(255,255,255,1);
display:flex;
margin-bottom: 0.2rem;
}
.tabbox ul{
list-style:none;
display:flex;
font-size:0.3rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
flex-wrap: wrap;
justify-content: space-between;
margin:0 auto;
}
.tabbox ul li{
float: left;
width: 1.46rem;
line-height: 0.8rem;
cursor: pointer;
text-align: center;
}
.tabbox ul li.active{
font-size:0.3rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(105,183,107,1);
line-height: 0.8rem;
position:relative;
border-bottom: 1px solid rgba(105,183,107,1);
}