代码示例如下:
<div class="con">
<ul class="tabWraps">
<li class="tabActive">内容一</li>
<li>内容二</li>
</ul>
<div class="tabCon">
<div class="detailCon">
<div class="norLabel" style="cursor:pointer">点我切换</div>
<div>我是内容一</div>
</div>
<div class="detailCon" style="display:none">
我是内容二
</div>
<div class="detailCom" style="display:none">
我是内容三
</div>
</div>
</div>
css:
.con{
width: 350px;
border:1px solid rgba(67, 172, 230, 1);
background: rgba(73, 180, 253, 0.32);
padding:10px;
box-sizing: border-box;
}
.tabCon{
font-size: 14px;
color:#fff;
font-weight: bold;
margin-top: 15px;
}
.norLabel{
text-align:center;
color:#FE9393;
}
.tabWraps{
font-size: 0;
border:1px solid rgba(67, 172, 230, 1);
background: rgba(73, 180, 253, 0.32);
position:relative;
width: 294px;
padding: 4px 14px;
}
.tabWraps::before{
content:'';
position:absolute;
width:2px;
height: 19px;
background:rgba(69, 255, 248, 1);
top:6px;
left: 50%;
}
.tabWraps li{
width: 43%;
height: 22px;
line-height: 22px;
text-align:center;
font-size: 14px;
font-family: SourceHanSansCN-Regular,
SourceHanSansCN;
font-weight: 400;
color: #FFFFFF;
display:inline-block;
border-radius: 4px;
}
.tabWraps .tabActive{
background:rgba(69, 205, 255, 1);
border:1px solid rgba(69, 255, 248, 1);
}
.tabWraps li:nth-child(2){
margin-left: 36px;
}
js:
<script src="dist/js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$('.tab-con .detailCon').first().show().siblings().hide()
$('.tabWraps>li').click(function () {
$(this).addClass('tabActive').siblings().removeClass('tabActive')
var index = $(this).index()
$('.tabCon .detailCon').eq(index).show().siblings().hide()
});
// 点我切换点击事件
$('.norLabel').click(function () {
$('.tabCon .detailCon').hide()
$('.tabCon .detailCom').show()
});
})
效果如下: