javascriptjqueryjquery-uijquery-eventsjquery-ui-tabs

Event listeners for jQuery's UI tabs?


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

Solution

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