Dynamic content with jQuery ui, unique tab active state

Question

Hi guys, I would like to create a jQuery menu with dynamic content using the jQuery ui.

My question is, I have images for tabs, and each one is different, so each one's roll over is different, how could I design it to display each unique tab's active state when that specific tab is clicked?

Thanx in advance!

Answer 1

I would use CSS and load a stylesheet that replaces the styles for your tabs based on the classes given to them by the plugin when they are in various states, plus a unique class that you give them based on their content or position. Make sure that your stylesheet is loaded after the jQuery UI stylesheets. After the tabs are initialized, go through and assign the unique classes so that your CSS is applied.

.ui-tabs .ui-tabs-nav li.ui-tabs-selected.tab-0
{
    background-image: url(/images/selected-tab-0.png);
}


$(function() {
   $('.tabs').tabs();
   $('.tabs').find('li').each( function(i) {
       $(this).addClass( 'tab-' + i );
   });
});

Note that you could adjust the tab on load if the image needs to change based on the url that is chosen -- your class would just need to be dependent on your href -- by changing the class assigned based on the url being loaded.