Изменение цвета вкладок с помощью 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. Вы можете определить дополнительные классы для каждого цвета. Удаление родных классов - не очень хорошая идея. Они вам понадобятся в какой-то момент. Вы можете проверить файл css в своем браузере, нажав клавишу F12, а в правой панели - стили. Там вы найдете путь к файлу, который сгенерировал этот стиль. Если этот файл 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