<ul class="cs_top-nav">
<li class="cs_top-nav-item active">A</li>
<li class="cs_top-nav-item">B</li>
<li class="cs_top-nav-item">C</li>
</ul>
<div class="cs_mid-content">
<div class="cs_content-item">a的内容</div>
<div class="cs_content-item">b的内容</div>
<div class="cs_content-item">c的内容</div>
</div>
.cs_top-nav {
width:100%;
padding-top:12px;
display:flex;
background:#ffffff;
}
.cs_top-nav-item {
height:96px;
flex:1;
position:relative;
display:flex;
justify-content:center;
align-items:center;
color:#333333;
font-size:16px;
}
.active {
color:#0090ff;
}
.active::after {
position:absolute;
bottom:0;
left:50%;
margin-left:-32px;
content:'';
width:64px;
height:4px;
background:#0090ff;
border-radius:2px;
}
.cs_mid-content {
margin-top:16px;
width:100%;
display:flex;
flex-direction:column;
background:#ffffff;
}
.cs_content-item {
height:120px;
display:flex;
justify-content:space-between;
align-items:center;
padding-right:32px;
box-sizing:border-box;
margin-left:32px;
border-bottom:1px solid #EEEEEE;
}
$('.cs_top-nav ').children("li").each(function(index, element) {
$(this).click(function() {
$(this).addClass('active').siblings().removeClass('active')
$($(".cs_mid-content").children()[index]).css("display", "block")
$($(".cs_mid-content").children()[index]).siblings().css("display", "none")
})
})