【问题标题】：bootstrap change navbar .active background color引导更改导航栏 .active 背景颜色
【发布时间】：2016-03-19 17:51:57
【问题描述】：

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <meta charset="utf-8">
  <!-- MOBILE FIRST -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- BOOTSTRAP -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <!-- THEMES -->
  <!-- <link href="css/theme_black.min.css" rel="stylesheet"> -->
  <!-- <link href="css/theme_white.min.css" rel="stylesheet"> -->

  <!-- HOMEMADE - these files are local --> 
  <!-- <script src="js/functions.js"></script> -->
  <!-- <link href="css/custom_style.css" rel="stylesheet"> --> 
</head>
<body>
<header id="header" class="header clearfix no-padding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Test</a>
      </div>
      <div class="collapse navbar-collapse no-padding">
        <ul class="nav navbar-nav pull-right" id="navigator">
          <li id="home"><a class="border" href="#">Home</a></li>
          <li id="about"><a class="border" href="#">About</a></li>
          <li id="cv"><a class="border" href="#">CV</a></li>
          <li id="contact"><a class="border" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
</body>

我在我的 javascript 中使用以下代码来更改 .active 项

functions.js

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

然而，我确实想更改活动项目的背景，并且我在我的 css 中尝试了几种不同的解决方案，但它们都没有按预期工作。

custom_style.css

.no-margin {
  margin: 0;
}

.no-padding {
  padding: 0;
}

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

编辑：

现在有一个小提琴：https://jsfiddle.net/819qbftg/2/

【问题讨论】：

您能否在代码中添加一个起点（例如 CodePen 或 JSFiddle）。
我正在尝试这个。但是我无法让我的 bootstrap.min.js 和 bootstrap.min.css 文件包含在内。（似乎不接受它们，因为它们是“http”链接而不是“https”。知道如何解决这个问题吗？跨度>
Nvm。我找到了解决方案。小提琴在两秒钟内出现..

标签： javascript html css twitter-bootstrap navbar

【解决方案1】：

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

JavaScript (jQuery)

var selector = '.nav li';

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

您正在寻址 #nav，但在您的 HTML 中，只有一个带有导航的类，没有 ID。另外，不要将类添加到href 属性中。

此 JS 代码将首先从所有选择器 (.nav li) 中删除 .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 */
}

请参阅this JSFiddle 以获取演示。

【讨论】：

绝妙的答案。您还使用 javascript 中的标识符 ("#") 更正了我的错误。干杯！
@Roy 我们应该在哪里添加这个样式...在 bootstrap.css 或 bootstrap-themes...？

【解决方案2】：

覆盖这些样式...

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

我把你的文件放在上面并将这个样式标签放在<head> 的底部。似乎按照你的要求做。我通常在您的 CSS 链接中最后包含的网站的单独 CSS 中执行此操作。

【讨论】：