版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
需要引入jquery才能实现点击切换样式的效果
html:
<div class="nav-box">
<div id="content" class="tab-box">
<div class="tab tab1 ">
<span>全部</span >
</div>
<div class="tab">
<span>待付款</span>
</div>
<div class="tab">
<span>待发货</span>
</div>
<div class="tab">
<span>待收货</span>
</div>
<div class="tab">
<span>待评价</span>
</div>
</div>
</div>
css:
.tab {
width: 1.5rem;
height: 100%;
display: flex;
justify-content:center;
align-items: center;
}
.tab span{
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5rem;
height: 100%;
color: #797979;
font-family: PingFang-SC-Medium;
font-size: 15px;
}
.tab1{
width: 1.5rem;
height: 100%;
display: flex;
justify-content:center;
align-items: center;
border-bottom: 0.1rem solid #fd4e5f;
}
.tab1 span{
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5rem;
height: 100%;
color: #797979;
font-family: PingFang-SC-Medium;
font-size: 15px;
}
js:
$(function () {
$(".tab").click(function () {
$(this).removeClass("tab");
$(this).addClass("tab1");
$(this).siblings().removeClass("tab1");
$(this).siblings().addClass("tab");
});
});