jQuery tabs . . . how do I change the css of a tab?

Question

Currently I use:

<div id="tabs" class="basictab">
                    <ul>
                        <li><a href="#fragment-1" id="Beta"><span>B.E.T.A. Plans</span></a></li>
                        <li><a href="#fragment-2" id="Mini"><span>Mini-Sites</span></a></li>
                        <li><a href="#fragment-3" id="Independent"><span>Independent Sites</span></a></li>
                        <li><a href="#fragment-4" id="Tools"><span>Tools</span></a></li>
                    </ul>
                    <div id="fragment-1" class="tabcontainer">
                        <nav:beta runat="server" ID="beta1" Visible="true" />
                    </div>
                    <div id="fragment-2" class="tabcontainer">
                        <nav:mini runat="server" ID="mini1" Visible="true" />
                    </div>
                    <div id="fragment-3" class="tabcontainer">

                    </div>
                    <div id="fragment-4" class="tabcontainer">
                        <nav:tools runat="server" ID="tools2" Visible="true" />
                    </div>
                </div>

<script type="text/javascript" >
$(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", 3);
  });
    </script>

to select a specific tab. When I do this how do I change the css of the selected tab? Wouldn't I want to chain off the

$tabs.tabs("select",3);

I have tried:

$tabs.tabs("select",3).removeClass('basictab').addClass('basictabactive');

but this changes the css for ALL the classes.

Many thanks in advance from a jQuery n00b.

Answer 1

You can find information about that here:

http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

Answer 2

Add a select or load handler (depending on when you want it to fire) that adds the CSS or class to the component that you want to change.

 var $tabs = $('#tabs').tabs({
                 event: 'mouseover',
                 select: function(event,ui) {
                             $(ui.panel).css({ backgroundColor: '#ffffff'});
                         });
             });

It might be easier to just use the existing classes for the tabs, though, and adjust the CSS for the tab container.

#tabs .ui-state-highlight {
    background-color: #ffffff;
}

#tabs .ui-state-active {
    background-color: #ff0000;
    color: #ffffff;
}

#tabs .ui-state-default {
    background-color: #ffff00;
    color: #000000;
}

Answer 3

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

This will change the class on your item.

Answer 4

Hi andrew,

If you using Firefox with Firebug extension, you can inspect the live page element, to see what class it currently have.

In your code, the element with class basictab is the tabs parent div. Your code will change it's class. If you want to change only the current active class, inspect it using Firebug. Current jQuery-UI implementation will change the selected li class to have class ui-tabs-selected.

If you purpose to change the element's class is to apply the css, maybe it's simpler for you to create css for ui-tabs-selected class, instead to change it, since it will make you write extra js code only for something that can be done with css alone.