CODEWITHSUNDEEP
jqueryjquery-uijquery-tabs
TheDevRay
TheDevRay

Reputation: 52

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

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?

Upvotes: 1

Views: 3448

Answers (1)

CodingIntrigue
CodingIntrigue

Reputation: 78535

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

Upvotes: 1

Related Questions