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

【问题标题】：Change page background color based on active Bootstrap tab根据活动的 Bootstrap 选项卡更改页面背景颜色
【发布时间】：2015-08-17 03:34:15
【问题描述】：

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

这是 Bootstrap 选项卡使用的唯一脚本：

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

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

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

jsfiddle

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

您可以使用包含选择器* 添加点击事件并检查特定的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

【讨论】：

@user3236756 很高兴为您提供帮助。

【解决方案2】：

看看这个；

Color Change Based On Hover

当前设置在:hover，如果您希望将颜色保留在背景上，请使用:active 并将特定颜色应用于background 属性

【讨论】：

【解决方案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/

【讨论】：