JQuery Tab - Make Selected tab clickable..

Question

Hello,

I basically need the current selected tab to remain clickable (meaning the link should still be active).

The content in the tab is loaded through ajax and can change, so the way the person can "refresh" the content it by clicking the tab again. But the default settings make the tab not clickable once it's selected, which makes the user have to click on another tab then back to refresh the content.

I appreciate any help, thanks.

Answer 1

The tabs plugin will fire a 'tabsselect' Event when a tab is clicked. Register a callback, whose second parameter will have a 'tab' property where you can check which tab you're on:

jQuery('#tabs-container').bind('tabsselect', function(e, tabsContainer) {

   jQuery(tabsContainer.tab).attr('href'));
});

EDITIED:

It will only fire when the tab actually changes. Maybe bind on the anchor element within the tabs structure, and check for the ui-tabs-selected class. There's decent documentation on the tabs plugin: http://docs.jquery.com/UI/Tabs .

Roughly:

jQuery('#tabs-container a').bind('click', function() {
    if(jQuery(e.target).hasClass('ui-tabs-selected')) {
        // do some stuff
    }
});