Html 如何在 twitter bootstrap 导航中更改活动 <li> 的背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17039816/
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
how do I change the background of my active <li> in twitter bootstrap nav
提问by Lucas Santos
Ok so I have a standard twitter bootstrap nav and I just wanted to change the background color of the active link when it is selected such as Home or Contact us.. Rite now if you are in a certain page the background of the li in the navigation bar is just plain black to demonstrate that it is selected. I wanted it to be blue. Here is the code:
好的，所以我有一个标准的 twitter bootstrap 导航，我只是想在选择活动链接时更改它的背景颜色，例如主页或联系我们..如果您在某个页面中，请立即使用 li 的背景导航栏只是纯黑色以表明它已被选中。我希望它是蓝色的。这是代码：
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Logo</a>
<div class="nav-collapse collapse text-center">
<ul class="nav pull-right">
<li class="active" id="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
I hear you would put something like .nav > li > a:active {background:blue} but that doesn't seem to work
我听说你会放一些类似 .nav > li > a:active {background:blue} 的东西，但这似乎不起作用
回答by Nick R
a:active
Is wrong for what you're trying to achieve
你想要达到的目标是错误的
The :active pseudo selector - A link becomes active when you click on it.
:active 伪选择器 -单击链接时链接变为活动状态。
Try
尝试
.nav .active { background:blue }
The > symbol will select the direct child element.
> 符号将选择直接子元素。
回答by TaeHee Kim
try this.
尝试这个。
<style>
#home.active, #contract.active{
background-color : blue
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Logo</a>
<div class="nav-collapse collapse text-center">
<ul class="nav pull-right">
<li class="active" id="home"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li id="contract"><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
回答by ling
Add following javascript to update active tab by highlight
添加以下 javascript 以通过突出显示更新活动选项卡
$('ul.nav > li').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
回答by Michael St Clair
I had to target the aelement inside of the active lifor the color to change
我必须瞄准a活动内部的元素li才能改变颜色
.active a {
background-color: #FFFFFF !important;
}
回答by xcv x
.nav-fixed=top>li.active>a
{
//styling
}
