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:

    
         
     
              
      
                   
       
厂房
            
       
土地
        
      
    
     
     
          
      
       1
      
        
      
       2
      
    
     
    

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