jquery ui tabs, do some css when specific tab is active, selected

Question

I would like to change some styling (for example body background color) when specific tab is selected (clicked) in jquery ui tabs.

Sth like:

if (tab nr 2 is selected) { $(body).css('background', 'red') }
if (tab nr 3 is selected) { $(body).css('background', 'blue') }

How can I check which tab is selected?

Answer 1

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     var index=ui.index;
     if(index===2){ 
        $(body).css('background', 'red')
     }
     else if(index===3){ 
        $(body).css('background', 'blue')
     }
 });

Tab select documentation

Tabs Events documenation

Answer 2

Looking at the documentation, you can use the event "enable" to keep track of this.

You could also do as such:

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected');

(always from the documentation)

Generally speaking, read the documentation, you'll find your answer there.