jQuery UI的标签添加类

Question

下面是我的HTML设立这一切工作正常的标签，我想通过改变类含外的div（ID =制表包装类=自行车），以扩展它有点什么标签正在显示。这个想法是基于该选项卡更改背景图像。

<div id="tab-wrap" class="bike"> 

     <div id="batter-finder"> 
      <h1>Battery Finder</h1> 
      <p>Choose Your Application then find your battery</p> 

      <div id="tabs"> 
       <ul> 
        <li><a href="#bike">Bike</a></li> 
        <li><a href="#atv">ATV</a></li> 
        <li><a href="#utv">UTV</a></li> 
        <li><a href="#snow">Snow</a></li> 
        <li><a href="#water">Water</a></li> 
       </ul> 

       <div id="bike"> 
        <p>Bike content</p> 
       </div> 

       <div id="atv"> 
        <p>ATV content</p> 
       </div> 

       <div id="utv"> 
        <p>UTV content</p> 
       </div> 

       <div id="snow"> 
        <p>Snow content</p> 
       </div> 

       <div id="water"> 
        <p>Water content</p> 
       </div> 

      </div> <!-- /tabs --> 

     </div> 

    </div> 

所以，如果我选择选项卡的“水”，我想这个类的改变：

<div id="tab-wrap" class="bike"> 

到

<div id="tab-wrap" class="water"> 

优雅的淡入/淡出变化是好。我jQuery是如下

$(document).ready(function() { 

    $("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); 
}); 

欣赏的帮助 感谢

Answer 1

，你可以像这样做，

demo

$("#tabs").tabs({ 
    fx: { height: 'toggle', opacity: 'toggle' }, 
    select: function(event, ui) { 
     $("#tab-wrap").attr('class', ui.panel.id); 
    } 
}); 

Answer 2

$("#tabs").bind("tabsselect", function(event, ui) { 
    $("#tab-wrap").attr('class', $(ui.panel).attr('id')); 
} 

，或者如果你想，当你声明的选项卡绑定事件：

$("#tabs").tabs({ 
    select: function(event, ui) { 
     $("#tab-wrap").attr('class', $(ui.panel).attr('id')); 
    } 
}); 

退房的事件部分jQuery UI tabs演示页面。