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()方法中当作参数使用。