0
点赞
收藏
分享

微信扫一扫

手写tab点击事件

进击的铁雾 2022-03-11 阅读 72
css

点击tab显示对应的内容

var setTab = function () {
$(".titlelist p").on('click',function (i) {
$(this).attr('class', 'little_biaoqian');
$(this).siblings('p').attr('class', 'little_biaoqian1');
var index = $(this).index()
$('.coursecontent>div').css('display','none')
$('.coursecontent>div').eq($(this).index()).css('display','flex')
})
}
<div class="content">
<div class="titlelist">
<p class="little_biaoqian">
tab1
</p>
<p class="little_biaoqian1">
tab2
</p>
<p class="little_biaoqian1">
tab3
</p>
<p class="little_biaoqian1">
tab4
</p>
<p class="little_biaoqian1">
tab5
</p>
</div>
<div class="coursecontent">
<div class="l4_main" >
tab1 content
</div>
<div class="l4_main" >
tab2 content
</div>
<div class="l4_main" >
tab3 content
</div>
<div class="l4_main" >
tab4 content
</div>
<div class="l4_main" >
tab5 content
</div>
</div>
举报

相关推荐

0 条评论