Javascript jQuery 的 UI 选项卡的事件侦听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5551211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event listeners for jQuery's UI tabs?
提问by Martin Bean
Are there event listeners available for jQuery UI's tabs widget?
是否有可用于 jQuery UI 的选项卡小部件的事件侦听器？
I'm wanting to change the background colour on a web page depending on what tab index is currently active. So something like this (pseudo code):
我想根据当前活动的标签索引更改网页上的背景颜色。所以像这样（伪代码）：
$('.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;
}
};
Thanks in advance.
提前致谢。
采纳答案by JS Mitrah
Use tabsshow event, Index will be start from 0.
使用 tabsshow 事件，索引将从 0 开始。
$('#tabs').bind('tabsshow', function(event, ui) {
switch (ui.index){
case 0:
$('body').css('background-image', '/images/backgrounds/1.jpg');
break;
}
});
回答by Pjl
it seems the old's version's of jquery ui don't support select event anymore.
似乎旧版本的 jquery ui 不再支持 select 事件。
This code will work with new versions:
此代码适用于新版本：
$('.selector').tabs({
activate: function(event ,ui){
//console.log(event);
console.log(ui.newTab.index());
}
});
回答by Ali Gangji
Use tabsactivate event
使用 tabsactivate 事件
$('#tabs').on('tabsactivate', function(event, ui) {
var newIndex = ui.newTab.index();
console.log('Switched to tab '+newIndex);
});
回答by davin
Yep: http://jqueryui.com/demos/tabs/under "Events"
是的：http: //jqueryui.com/demos/tabs/在“事件”下
Working example: http://jsfiddle.net/g7Q2L/(I used embedded values and not the index to make the markup less coupled with the code)
工作示例：http: //jsfiddle.net/g7Q2L/（我使用嵌入值而不是索引来减少标记与代码的耦合）
Check the docs, you can .bind( "tabsselect", function(){})orwhen you initiate tabs add a selectproperty to the initiliasing object like in my jsfiddle example.
检查文档，您可以.bind( "tabsselect", function(){})或在启动选项卡时select向初始化对象添加属性，就像我的 jsfiddle 示例中那样。
回答by neebz
the Tabs plugin have a 'show' event which is fired whenever a tab is shown.
Tabs 插件有一个 'show' 事件，每当显示一个选项卡时就会触发该事件。
check the events in documentation > http://jqueryui.com/demos/tabs/
检查文档> http://jqueryui.com/demos/tabs/ 中的事件
