Question

我想使用jQuery根据哪个Bootstrap选项卡处于活动状态来更改页面背景颜色。

这是Bootstrap标签使用的唯一脚本：

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

我需要修改body background-color CSS属性，具体取决于哪个标签处于活动状态。

下面的小提琴有裸露的Bootstrap 3标签，背景为金色。我需要能够为四个选项卡中的每一个设置单独的十六进制值。

jsfiddle

Answer 1

您可以使用包含选择器*添加click事件，并根据您单击的Bootstrap选项卡检查特定id以设置页面background颜色：

$('[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/

根据活动的Bootstrap选项卡更改页面背景颜色

3 个答案: