使用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屬性