Are there event listeners available for jQuery UI's tabs widget?
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;
}
};
Use tabsshow event, Index will be start from 0.
$('#tabs').bind('tabsshow', function(event, ui) {
switch (ui.index){
case 0:
$('body').css('background-image', '/images/backgrounds/1.jpg');
break;
}
});