效果图:
html代码
<!-- div_title start -->
<div class="div_title ">
<div class="switchTitle">
<div class="next_btn" id="shjy">
生活检验
</div>
<div class="next_btn next_btn_show next_btn_text" id="jyjc">
基因检验
</div>
</div>
</div><!-- div_title end -->
css代码
.div_title{
height: 48px;
background: #FFFFFF;
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
.switchTitle{
margin: auto 25%;
display: flex;
}
.next_btn{
width: 50%;
line-height: 48px;
text-align: center;
border-radius: 0px 0px 0px 0px;
opacity: 1;
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
-webkit-background-clip: text;
}
.next_btn_text{
font-size: 18px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #37B7A4;
}
.next_btn_show::after{ /* !!! */
content: ''; /* !!! */
width: 20px;
height: 3px;
background: #37B7A4;
border-radius: 4px 4px 4px 4px;
opacity: 1;
display: block; /* !!! */
margin: -8px auto;
}
js代码
//分类 点击事件
$('.next_btn').on('click', function() {
//捕捉点击分类的id
queryType = $(this).attr("id");
$('.next_btn').removeClass('next_btn_show');
$('.next_btn').removeClass('next_btn_text');
$(this).addClass('next_btn_show');
$(this).addClass('next_btn_text');
})