解决jq双重tab-多个选项卡嵌套关系 封装tab点击和hover事件

css:

.tab-section{
    position: relative;
}
.tab-section .tab-header{
    position: relative;
}
.tab-section .tab-header li{
    float: left;
    text-align: center;
    cursor: pointer;
}
.tab-header li:hover,.tab-header li.active{
    color: #f98726;
}
.tab-section .tab-body .tab-block{
    display: none;
}
.tab-section .tab-body .tab-block.active{
    display: block;
}

HTML:

<div class="tab-section j-tab-click-2">
    <div class="tab-header">
        <ul>
            <li>厂房</li>
            <li>土地</li>
        </ul>
    </div>
<div class="tab-body j-tab-body-2">
    <div class="tab-block active">1</div>
        <div class="tab-block">2</div>
    </div>
</div>

js使用：

//tab切换通用方法
function jTab(tabId,tabBox,eve){
    $(tabId).bind(eve,function(){
        $(this).addClass('active').siblings().removeClass('active');
        $(tabBox).children().eq($(this).index()).addClass('active').siblings().removeClass('active');
   });
}

$(function(){

    点击事件： jTab(".j-tab-click-1>.tab-header li",".j-tab-body-1","click");
    鼠标移上事件：jTab(".j-tab-hover-2>.tab-header li",".j-tab-body-2","mouseeter");
});

 

注意： 鼠标移上只能写mouseeter，不能使用hover

使用 mouseenter 和 mouseleave 这两个事件来代替 (ps:同时这也是 .hover() 函数中使用的事件) 

.hover()事件是jquery自定义函数 就相当于mouseenter 和 mouseleave 这两个事件    它并非一个真正的事件   所以不能在bind()方法中当作参数使用。