自定义结构-Tab切换
前言:在搭建页面的时候,可能会需要多块区域进行tab切换,这时候需要规范化封装一个结构,只需要一段js,可重复且多处使用;
1 . tab样式
2 . js代码
$(function(){
$('.hover_change').on('mouseenter', 'li', function () {
$(this).addClass('active').siblings().removeClass('active');
$(this).parents('.hover_box').find('.hover_content').hide();
$(this).parents('.hover_box').find('.hover_content').eq($(this).index()).show();
});
});
3 . html结构
<div class="hover_box">
<ul class="hover_change">
<li class="active">公告</li>
<li>决定</li>
<li>会议</li>
</ul>
<ul class="hover_content" style="display:block;">
<li>Cont1</li>
</ul>
<ul class="hover_content" style="display:none;">
<li>Cont2</li>
</ul>
<ul class="hover_content" style="display:none;">
<li>Cont3</li>
</ul>
</div>
总结:至此已经实现了基本的tab切换(tab选中的样式应写在active状态下),具体需求可自行更改;