Изменить цвет фона на основе активной вкладки Bootstrap

Question

Я хочу использовать jQuery, чтобы изменить цвет фона , на основе которого активна вкладка Bootstrap.

Это единственный скрипт, используемый закладках Bootstrap:

$('#myTabs a').click(function (e) { 
    e.preventDefault() 
    $(this).tab('show') 
}) 

Мне нужно изменить свойство background-color CSS тела в зависимости от того, какая вкладка активна.

Скриншот внизу имеет голые кости Bootstrap 3 вкладки с золотым цветом фона. Мне нужно иметь возможность установить отдельное шестнадцатеричное значение для каждой из четырех вкладок.

jsfiddle

Answer 1

Вы можете использовать содержит селектор *, чтобы добавить событие щелчка и проверить для конкретного id, чтобы установить цвет страницы background основываясь на какой вкладке Bootstrap вы щелкаете:

$('[id*="tab-"]').click(function (e) { 
    e.preventDefault() 
    $(this).tab('show') 

    if(this.id=="tab-1"){ 
     $('body').css('background', 'red'); 
    } 
    else if(this.id=="tab-2"){ 
     $('body').css('background', 'green'); 
    } 
    else if(this.id=="tab-3"){ 
     $('body').css('background', 'blue'); 
    } 
    else if(this.id=="tab-4"){ 
     $('body').css('background', 'purple'); 
    } 
}); 

Here a working jsfiddle to play with

Answer 2

проверить это;

Color Change Based On Hover

Это в настоящее время устанавливается на :hover, если вы ищете вперед, чтобы цвета на заднем плане, использовать :active и применить определенный цвет к background собственности

Answer 3

Положите этот код. Вы можете изменить цветной гексагон на свой собственный.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    if ($(e.target).attr('href') == '#one') 
     $('body').css('background-color', 'gold'); //gold 
    if ($(e.target).attr('href') == '#two') 
     $('body').css('background-color', '#ff0000'); //red 
    if ($(e.target).attr('href') == '#three') 
     $('body').css('background-color', '#2980b9'); //blue 
    if ($(e.target).attr('href') == '#four') 
     $('body').css('background-color', '#8e44ad'); //purple 
}) 

Рабочая Демо:https://jsfiddle.net/c4ohLmjx/2/