Bootstrap 活动选项卡颜色仅在一个选项卡上更改答案

【问题标题】：Bootstrap active tab color only changes on one tabBootstrap 活动选项卡颜色仅在一个选项卡上更改
【发布时间】：2016-04-05 08:23:14
【问题描述】：

我正在尝试使用 Jquery 设置引导活动选项卡颜色，我遇到的问题是，当我使用 Jquery 函数时，它会将活动选项卡更改为红色（太棒了！）但是当我单击另一个选项卡时，颜色默认为回到引导程序蓝色，第一个选项卡的背景仍然是红色。

这是我使用的函数：

$('document').ready(function () {
    $('.nav-pills>li.active>a').css("background-color", "#FF0000");
})

我需要设置活动颜色，以便选择的任何选项卡都将具有我设置的颜色。

任何帮助将不胜感激。

【问题讨论】：

您为什么要尝试使用 JavaScript 而不是 CSS？
该站点将被发送给多个已经设置了 CSS 的客户。我无法对样式表文件进行任何更改。但是我可以内联进行更改。
如果您需要这样做，只需将其绑定到选项卡点击事件。

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

简单地使用

.nav-pills>li.active>a:focus{background-color: #FF0000 !important;}

【讨论】：

【解决方案2】：

您应该在每次单击某个项目时运行您的代码。

将$('.nav-pills>li.active>a').css("background-color", "#FF0000"); 放在您放置它的位置，但也放在.click 或on("click",... 事件中，以便您的选项卡再次运行并在更改active 类的元素后再次设置颜色。

你也可以用.bind()绑定它。

此外，在设置活动选项卡颜色后，您还应该更改所有非活动元素的颜色。

检查元素上是否有 active 类，hasClass("active") 并仅在没有类 active 的元素上恢复颜色。

更好的方法是只使用包含颜色属性的addClass 和removeClass，但您不能更改 CSS，正如您所提到的。

编辑：

您也可以使用.siblings() 函数来选择所选元素的所有同级元素并更改它们的颜色，如下所示：

$("your-tab-li-element").click(function(){
  $(this).css("background-color", "#FF0000");
  $(this).siblings().css( "background-color", "other-color" );
});

【讨论】：

这不行，它会在每个标签被点击后为其添加颜色。
是的，您也应该添加以删除非活动标签的颜色。我将编辑我的答案。
我试过了：$('#Tab1').click(function () { $('.nav-pills>li>a').css("background-color", "# FFFFFF") $('.nav-pills>li.active>a').css("background-color", "#FF0000") }) 但是它仍然无法正常工作。我必须双击标签才能实际应用颜色。
是的，我猜是因为引导程序会在您点击后设置active 类。尝试.siblings() 函数（请参阅我的编辑），但如果可能，请尝试li 元素，而不是a。因为你有一些兄弟li 元素，我想。
并在点击处理程序中使用 $(this).css("background-color", "#FF0000"); 而不是 $('.nav-pills>li.active>a').css("background-color", "#FF0000");。

【解决方案3】：

不要直接设置颜色。这使您的代码在切换选项卡时更加复杂。这样做：

首先创建您的自定义类（或覆盖 bootstrap .active）：

.my-active-class{
    background-color:red;
}

现在切换这个类：

$("#MyTabContainer").click(function(){
  //First remove 'my-active-class'from active tabs
  $(this).find('.my-tab').removeClass('my-active-class');

  //Now finally set 'my-active-class' to this selected tab
  $(this).find('.my-tab').addClass("my-active-class");
});

//add this line to document ready (on page load), to preset the selected tab
$("#MyTabContainer").find('.my-tab').addClass("my-active-class");

就是这样。

【讨论】：