Question

我想更改导航栏上活动标签的颜色，我使用bootstrap，这是我的代码：

<body>
     <nav class = "navbar navbar-default navbar-fixed-top">
    <div class = "container-fluid">
      <div class = "navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_navbar">
          <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
      </div>
      <div class="collapse navbar-collapse" id="main_navbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ul>
      </div>
    </div>
       </nav>    </body>

我试图用它更改它但没有工作（css文件）：

.active {
  background-color: green !important;
}

也喜欢这个（javascript文件）：

$(document).ready(function() {
  $('.active').css("background-color", "green");
});

编辑：

我尝试用代码snipet解释更多，但css部分对我不起作用，

如果我将其添加到我的css文件中：

.navbar {
  background-color: yellow;

}

整个条形变为黄色，但活动标签除外，该颜色是我想要更改的颜色。

Answer 1

Bootstrap对我做了一些非常愚蠢的事情，并在导航中的$(".id").each(function(){ var id; var photo; id = '#' + (this).getAttribute('id'); console.log(id); photo = (this).getAttribute('src'); console.log(photo); $(id).click(function(e) { e.preventDefault(); $(".backstretch").backstretch(photo); }); });标签上提供了所有实际样式，而不是像大多数人那样<a>。您应该更改<li>上的大多数样式，而不仅仅是.active a

＆＃13;

.active

＆＃13;

.active a {

  background-color: green !important;

}

＆＃13;

Answer 2

如果我们做的很好，CSS就可以正常工作

 <style>
        a.active.nav-link{background-color: #17a2b8!important;}
    </style>

使用它，您将完成。不需要Java语言

更改.active选项卡引导程序的默认颜色

2 个答案: