tab切换标签页简易代码

<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")
    })
})