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

最新推荐文章于 2023-02-20 11:23:23 发布

weixin_33901641

最新推荐文章于 2023-02-20 11:23:23 发布

阅读量992

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/parchments/blog/1815153

版权

2019独角兽企业重金招聘Python工程师标准>>>

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");
});