使用jquery ui更改标签颜色？

Question

我有使用HTML和JQuery UI创建的选项卡。

PFB链接。

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

}); 

是否有可能改变标签的颜色？

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设置的任何其他类之外，您必须在jqueryui.css文件中更改它。您可以根据每种颜色定义其他类。删除本地类不是一个好主意。你会在某个时候需要它们。您可以通过按F12键在浏览器中检查css文件，在右窗格中可以看到样式。在那里你会找到生成这种风格的文件的路径。如果此css文件正在远程加载，您可以通过添加!important属性来覆盖样式。例如，要更改.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/

您可以在CSS类改变

ul.tabs li 

background属性