解決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()方法中當作參數使用。