Question

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

这是我正在使用的功能：

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

我需要设置活动颜色，以便选择的任何标签都将由我设置颜色。

非常感谢任何帮助。

Answer 1

只需使用

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

Answer 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" );
});

Answer 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");

那就是它。

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

3 个答案: