jQuery UI标签的事件监听器？

Question

是否有事件监听器可用于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; 
    } 
}; 

在此先感谢。

Answer 1

使用tabsshow事件，指数将开始从0

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

Answer 2

的标签插件具有每当所示的标签，其发射的“秀”事件。

检查在文件中的事件>http://jqueryui.com/demos/tabs/

Answer 3

没错：http://jqueryui.com/demos/tabs/下“事件”

工作实施例：http://jsfiddle.net/g7Q2L/（I使用的包埋值，而不是索引可以使更少加上代码标记）

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

Answer 4

使用tabsactivate事件

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

Answer 5

似乎老的版本的jQuery用户界面不支持选择的事件了。

该代码可以使用新版本的工作：

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