使用jQuery UI更改标签颜色？

Question

I have tabs created using HTML and JQuery UI.

PFB the link.

jsfiddle

$(document).ready(function() {
    //hiding tab content except first one
    $(".tabContent").not(":first").hide();
    // adding Active class to first selected tab and show
    $("ul.tabs li:first").addClass("active").show(); 

    // Click event on tab
    $("ul.tabs li").click(function() {
        // Removing class of Active tab
        $("ul.tabs li.active").removeClass("active");
        // Adding Active class to Clicked tab
        $(this).addClass("active");
        // hiding all the tab contents
        $(".tabContent").hide();       
        // showing the clicked tab's content using fading effect
        $($('a',this).attr("href")).fadeIn('slow');

        return false;
    });

});

Is it possible to change the color of the tabs?

Answer 1

Try like this http://jsfiddle.net/jogesh_pi/2Mzr5/6/

$(document).ready(function() {
    //hiding tab content except first one
    $(".tabContent").not(":first").hide();

    // adding Active class to first selected tab and show
    $("ul.tabs li:first").addClass("active").show(); 

    // Click event on tab
    $("ul.tabs li").click(function() {
        // Removing class of Active tab
        $("ul.tabs li.active").removeClass("active");
        $("ul.tabs li").removeClass("colorz");

        // Adding Active class to Clicked tab
        $(this).addClass("active");
        $("ul.tabs li").not( $(this) ).addClass("colorz");

        // hiding all the tab contents
        $(".tabContent").hide();       

        // showing the clicked tab's content using fading effect
        $($('a',this).attr("href")).fadeIn('slow');

        return false;
    });

});

Answer 2

在Chrome ，右键单击并选择“ Inspect Element ，找到选项卡的类，然后进行更改。

Answer 3

Instead of removing adding active class or any other class that is being set by jqueryui , you must change it in jqueryui.css file. You can define additional classes against each color. Removing native classes is not a good idea. You will need them at some point. You can check css file in your browser by pressing F12 key and in right pane you can see styles. There you will find path of file that generated this style. If this css file is being loaded remotely, you can override your styles by adding !important poperty. For example, to change color of .active you can do something like following code in your css files.

.active{
     background: #FFF !important;
}

Answer 4

I think this a duplicate question to this. Please follow this one to get the answer. How can i change the background color in jQuery.ui tabs

alternatively you can use:

CSS:

.ui-tabs .ui-tabs-nav
{
background: red;
}

.ui-tabs .ui-tabs-panel /* just in case you want to change the panel */
{
background: red;
}

Answer 5

You can create a css class:

.red-background{
    background-color: red !important; /* important is required to override */
}

In your jquery call and add this class as required. For example:

$("ul.tabs li").addClass("red-background");

Answer 6

I have updated the fiddle for you: http://jsfiddle.net/2Mzr5/14/

You can change the background attribute of

ul.tabs li 

in the css classes