【问题标题】：Jquery UI Tabs add classJquery UI Tabs 添加类
【发布时间】：2010-07-17 11:13:11
【问题描述】：

下面是我为所有工作正常的选项卡设置的 HTML，我想通过将包含 div 的外部类 (id=tab-wrap class=bike) 更改为显示的任何选项卡来扩展它。这个想法是根据选项卡更改背景图像。

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

感谢帮助谢谢

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

你可以这样做，

demo

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

【讨论】：

【解决方案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 演示页面的事件部分。

【讨论】：