HTML
<div class="main">
<div class="btn">
<!-- Tab标题 -->
<span class="active spanList">课程介绍</span>
<span class="spanList">用户故事</span>
<span class="spanList">常见问题</span>
<span class="spanList">电影列表</span>
</div>
<div class="context">
<!-- Tab内容 -->
<div class="con"> 第一个<br/></div>
<div class="con">第二个<br /> </div>
<div class="con">第三个<br /> </div>
<div class="con">第四个<br /> </div>
</div>
</div>
CSS
.main {
width: 100%;
/* background-color: green; */
}
.btn{
width: 100%;
height: 1.2rem;
display: flex;
justify-content: space-around;
box-shadow: 0 0.04rem 0 rgba(0,55,88,.1);
}
.spanList{
font-family: PingFang-SC-Medium;
font-size: 0.30rem;
color: #3f3f3f;
text-align: center;
line-height: 1.2rem;
display:inline-block;
position: relative;
letter-spacing: 0.005rem;
font-weight: 400;
}
.active{
font-family: PingFang-SC-Bold;
font-size: 0.48rem;
font-weight: 600;
color: #3f3f3f;
text-align: center;
line-height: 1.2rem;
letter-spacing: 0.005rem;
display:inline-block;
}
.active::after{
position: absolute;
left: 0.48rem;
top: 1rem;
content:"";
width: 0.8rem;
height: 0.08rem;
background-color: #0FA2F9;
border-radius: 0.04rem;
}
.context{
width: 100%;
float: left;
}
.con {
display:none;
width: 7.5rem;
margin-top: 0.8rem;
}
JS切换(首先要引入jquery)
$(".con").eq(0).show();
$(".btn span").click(function(){
var num =$(".btn span").index(this);
$(".con").hide();
$(".con").eq(num).show();
$(this).attr("class","active spanList");
$(this).siblings().attr("class","spanList");
})
效果展示: