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演示頁面。