Javascript 引导更改导航栏。活动背景色

我有一个导航栏，在其中我无法真正看到.active颜色，因为我使用的是我非常喜欢的第三方主题，但我有一个主题问题。我无法正确查看当前处于活动状态的导航栏项。因此，我想为.active元素添加背景色

index.html 不过，我确实想更改活动项的背景，我在css中尝试了几种不同的解决方案，但没有一种能按预期工作

自定义样式.css 编辑：

---

现在有一个问题：

要实现您想要的，您必须做两件事，确保使用JavaScript处理正确的项目，并覆盖引导CSS设置的默认样式

JavaScript（jQuery）

您正在处理

#nav

，但在HTML中，只有一个类带有nav，没有ID。另外，不要将该类添加到

href

属性中

此JS代码将首先从所有选择器（

.nav li

）中删除

.active

，然后在单击的项目上再次设置它

样式添加

---

请参阅以获取演示。

覆盖这些样式

<style>
   .navbar-default .navbar-nav>li>a:focus { color: #DD0000; }
   .navbar-default .navbar-brand:focus { color: #DD0000; }
</style>

.navbar default.navbar nav>li>a:focus{color:#DD0000；}
.navbar默认值.navbar品牌：焦点{color:#DD0000；}

---

我把你的文件放在上面，把这个样式标签放在

的底部。似乎按你的要求做了。我通常在单独的CSS中为最后包含在CSS链接中的站点执行此操作。

能否在代码中添加起点（例如CodePen或JSFIDLE）。我目前正在尝试此操作。但是，我很难将bootstrap.min.js和bootstrap.min.css文件包括在内。。（它似乎不接受它们，因为它们是“http”链接而不是“https”。你知道如何解决这个问题吗？Nvm。我找到了一个解决方案。两秒钟后出现Fiddle。回答很好。你还用javascript中的标识符（“#”）纠正了我的错误。干杯！@Roy我们应该在哪里添加这个样式…在bootstrap.css或bootstrap主题中。。。？

$('#nav li a').click(function() {
  $('#nav li').removeClass();
  $($(this).attr('href')).addClass('active');
});

.no-margin {
  margin: 0;
}

.no-padding {
  padding: 0;
}

//some sort of .active {
//  background-color: blue;
//}

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

.navbar-default .navbar-nav>.active> a, 
.navbar-default .navbar-nav>.active> a:focus, 
.navbar-default .navbar-nav>.active> a:hover {
  background: red; /* Anything you want */
}

<style>
   .navbar-default .navbar-nav>li>a:focus { color: #DD0000; }
   .navbar-default .navbar-brand:focus { color: #DD0000; }
</style>