jQuery UI 选项卡的事件监听器？答案

【问题标题】：Event listeners for jQuery's UI tabs?jQuery UI 选项卡的事件监听器？
【发布时间】：2011-04-05 11:40:41
【问题描述】：

是否有可用于 jQuery UI 的选项卡小部件的事件侦听器？

我想根据当前处于活动状态的选项卡索引来更改网页的背景颜色。所以像这样的东西（伪代码）：

$('.tabs').addEventListener(index, changeBackgroundImage);

function changeBackgroundImage(index) {
    switch (index) {
        case 1:
            $('body').css('background-image', '/images/backgrounds/1.jpg');
        break;
        case 2:
            $('body').css('background-image', '/images/backgrounds/2.jpg');
        break;
        case 3:
            $('body').css('background-image', '/images/backgrounds/3.jpg');
        break;
        default:
            $('body').css('background-image', '/images/backgrounds/default.jpg');
        break;
    }
};

【问题讨论】：

标签： javascript jquery jquery-ui jquery-events jquery-ui-tabs

【解决方案1】：

旧版本的 jquery ui 似乎不再支持 select 事件了。

此代码适用于新版本：

$('.selector').tabs({
                    activate: function(event ,ui){
                        //console.log(event);
                        console.log(ui.newTab.index());
                    }
});

【讨论】：

【解决方案2】：

使用 tabsactivate 事件

$('#tabs').on('tabsactivate', function(event, ui) {
    var newIndex = ui.newTab.index();
    console.log('Switched to tab '+newIndex);
});

【讨论】：

【解决方案3】：

使用 tabsshow 事件，索引将从 0 开始。

$('#tabs').bind('tabsshow', function(event, ui) { 
  switch (ui.index){
    case 0: 
        $('body').css('background-image', '/images/backgrounds/1.jpg');
        break;
  }
});

【讨论】：

【解决方案4】：

是的：http://jqueryui.com/demos/tabs/ 在“事件”下

工作示例：http://jsfiddle.net/g7Q2L/（我使用嵌入值而不是索引来减少标记与代码的耦合）

查看文档，您可以.bind( "tabsselect", function(){})或在启动选项卡时将select 属性添加到初始化对象，就像我的 jsfiddle 示例中一样。

【讨论】：

【解决方案5】：

标签插件有一个“显示”事件，每当标签显示时就会触发。

查看文档中的事件 > http://jqueryui.com/demos/tabs/

【讨论】：