jQuery 更改活动导航项的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41743102/
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
Changing the color of active nav-item
提问by Rehan
I have a navbardesigned in Bootstrap. I am trying to make it a different color when the class of the nav-itemis set to active.
我navbar在 Bootstrap 中有一个设计。当 的类nav-item设置为active.
However I am not able to do so. When I set the backgroundthe background color is changing, but when I use colorthe color is not changing. Note that I'm using Bootstrap v4.
但是，我无法这样做。当我设置background背景颜色时，背景颜色会发生变化，但是当我使用时color颜色不会发生变化。请注意，我使用的是 Bootstrap v4。
$(document).ready(function() {
"use strict";
$('ul.navbar-nav > li').click(function(e) {
e.preventDefault();
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});.navbar-toggler:focus {
outline: 0;
}
.navbar-nav > .active {
color: aqua!important; **// THIS DOES NOT WORK**
background-color: chartreuse; **//THIS WORKS**
}
.nav-item > a:hover {
color: aqua!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span>
</button>
<h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
<div class="collapse animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>采纳答案by Rory McCrossan
The issue is because the .nav-item > a:hoveris more specific than .navbar-nav > .active. To fix this, remove the !importantoperator (as you should avoid it at all costs) and make the rule you want to override more specific.
问题是因为.nav-item > a:hover比 更具体.navbar-nav > .active。要解决此问题，请移除!important运算符（因为您应该不惜一切代价避免它）并使您要覆盖的规则更加具体。
.navbar-nav > .active > a {
color: aqua;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}
$(document).ready(function() {
"use strict";
$('ul.navbar-nav > li').click(function(e) {
e.preventDefault();
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});.navbar-nav > .active > a {
color: aqua;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>回答by Mukesh Ram
Try using adding color CSS on the atag:
尝试在a标签上添加颜色 CSS ：
.navbar-nav > .active a{
color : aqua;
}
.navbar-toggler:focus {
outline: 0;
}
.navbar-nav > .active {
color : aqua!important; **// THIS DOES NOT WORK**
background-color: chartreuse; **//THIS WORKS**
}
.navbar-nav > .active a{
color : aqua
}
.nav-item > a:hover {
color : aqua!important;
}
ul li{
list-style:none;
margin: 10px
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span></button>
<h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
<div class="collapse1 animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
</div>
</nav>回答by Gmoney Mozart
.active a{
color: red !important;
}
this should work for over-riding the custom bootstrap 4 theme.
这应该适用于覆盖自定义引导程序 4 主题。
