jquery ui tabs prevent ui-tabs-selected ui-state-active being added

Question

Looking for a way to prevent jquery from adding the ui-tabs-selected and ui-state-active to the tab bar / menu when it changes from tab to tab. But add my own styles if possible.
Tried to find a solution, but nothing yet... anyone?

Answer 1

There are a few ways you could do this.

• Download the full jQuery UI code and strip out the code which adds the styles to the tab, then minify that again yourself if needed:
  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js

• Use the jQuery UI tabs select event to remove the classes:

  $( ".selector" ).tabs({
      select: function(event, ui) {
          $(".selector .ui-tabs-nav > li").removeClass("ui-state-active ui-state-selected");
      }
  });
  

• Just override the styles for ui-state-active and ui-state-selected with your own CSS:

  .selector .ui-tabs-nav > li.ui-state-active {
      color: #FF0000;
  }
  .selector .ui-tabs-nav > li.ui-state-selected {
      color: #FF00FF;
  }