Javascript 根据活动引导选项卡更改页面背景颜色

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

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

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

我需要修改主体的

背景色

CSS属性，具体取决于哪个选项卡处于活动状态

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

看看这个

---

这是当前设置的

：悬停
，如果您希望保持背景颜色，利用
：active
并将特定颜色应用于
background
属性
您可以使用包含选择器
*
添加单击事件，并检查特定的
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');
    }
});

请输入此代码。您可以将十六进制颜色更改为自己的颜色

$('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
})

工作演示：
@user3236756我很高兴能帮助您。