自定义结构-Tab切换

自定义结构-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状态下），具体需求可自行更改；