Question

我使用HTML和JQuery UI创建了标签。

PFB链接。

$(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;
    });

});

是否可以更改标签的颜色？

Answer 1

尝试这样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

您必须在jqueryui.css文件中更改它，而不是删除添加活动类或由jqueryui设置的任何其他类。您可以针对每种颜色定义其他类。删除本机类不是一个好主意。你会在某些时候需要它们。您可以按F12键在浏览器中查看css文件，在右侧窗格中可以看到样式。在那里你会找到生成这种风格的文件路径。如果远程加载此css文件，您可以通过添加!important poperty来覆盖您的样式。例如，要更改.active的颜色，您可以执行类似于css文件中的代码的操作。

.active{
     background: #FFF !important;
}

Answer 4

我认为这是一个重复的问题。请按照这个来得到答案。 How can i change the background color in jQuery.ui tabs

或者您可以使用：

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

您可以创建一个css类：

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

在你的jquery调用中，根据需要添加这个类。例如：

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

Answer 6

我已经为您更新了小提琴：http://jsfiddle.net/2Mzr5/14/

您可以更改

的背景属性

ul.tabs li

在css类

中

使用jquery ui更改选项卡颜色？

6 个答案: