twitter-bootstrap 引导程序更改导航栏 .active 背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36105119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap change navbar .active background color
提问by Zeliax
I have a navbar in which I can't really see the .active color as I am using a 3rd party theme that I really like, but however I have one problem with the theme. I can't properly see which of my navbar items that is currently active. Therefore I want to add a background color to the .active element.
我有一个导航栏，在其中我无法真正看到 .active 颜色，因为我使用的是我非常喜欢的 3rd 方主题，但是我对该主题有一个问题。我无法正确查看当前处于活动状态的导航栏项目。因此，我想为 .active 元素添加背景颜色。
index.html
索引.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>
I am using the following code in my javascript to change the .active item
我在我的 javascript 中使用以下代码来更改 .active 项目
functions.js
函数.js
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
I do however want to change the background of the active item, and I have tried a couple of different solutions in my css, but none of them work as intended.
但是，我确实想更改活动项目的背景，并且我在我的 css 中尝试了几种不同的解决方案，但没有一个能按预期工作。
custom_style.css
custom_style.css
.no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}
//some sort of .active {
// background-color: blue;
//}
EDIT:
编辑：
Now with a fiddle: https://jsfiddle.net/819qbftg/2/
现在用小提琴：https: //jsfiddle.net/819qbftg/2/
回答by Roy
To achieve what you want, you have to do two things, make sure you address the right item with JavaScript and override the default styling that's been set by the Bootstrap CSS.
要实现您想要的效果，您必须做两件事，确保使用 JavaScript 处理正确的项目并覆盖 Bootstrap CSS 设置的默认样式。
JavaScript (jQuery)
JavaScript (jQuery)
var selector = '.nav li';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
You were addressing the #nav, but in your HTML, there was only a classwith nav, no ID. Also, don't add the class to the hrefattribute.
您正在处理#nav，但是在您的 HTML 中，只有一个带导航的类，没有 ID。另外，不要将类添加到href属性中。
This JS code will first remove .activefrom all selectors (.nav li) before setting it again on the item that's clicked.
此 JS 代码将首先.active从所有选择器 ( .nav li) 中删除，然后在单击的项目上再次设置它。
Styling added
添加样式
.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 */
}
See this JSFiddlefor a demo.
有关演示，请参阅此 JSFiddle。
回答by Aron Boyette
Override these styles...
覆盖这些样式...
<style>
.navbar-default .navbar-nav>li>a:focus { color: #DD0000; }
.navbar-default .navbar-brand:focus { color: #DD0000; }
</style>
I took your file above and put this style tag at the bottom of the <head>. Seems to do what you're asking. I usually do this in a separate CSS for the site that is included last in your CSS links.
我把你的文件放在上面，把这个样式标签放在<head>. 似乎做你要问的。我通常在一个单独的 CSS 中为最后包含在您的 CSS 链接中的站点执行此操作。
