twitter-bootstrap Bootstrap 导航栏使单击的选项卡处于活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23152716/
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 navbar make clicked tab to be active
提问by Mihai Zamfir
I've read other similar posts, but I can't make mine working. I want to make the clicked tab to be active
我读过其他类似的帖子，但我不能让我的工作。我想让点击的选项卡处于活动状态
So here is how my bootstrap navbar looks like in html:
所以这是我的引导程序导航栏在 html 中的样子：
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="/static/images/logo.png" alt="Prime Solutions"/>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/"><strong>Acasa</strong></a></li>
<li><a href="/software"><strong>Software</strong></a></li>
<li><a href="/hardware"><strong>Hardware</strong></a></li>
<li><a href="/about"><strong>Despre Noi</strong></a></li>
<li><a href="/contact"><strong>Contact</strong></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Servicii</strong><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/servicii/servicii">Servicii IT&C </a></li>
<li><a href="/servicii/consultanta">Consultanta IT&C </a></li>
<li class="divider"></li>
<li class="dropdown-header">Parteneri</li>
<li><a href="/parteneri">Partenerii nostri</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="btn btn-info" href="/noutati"><span id="news">Noutati</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
However, it doesn't work. It only keeps my AcasaTab to be active.
How should I write the script? thanks
但是，它不起作用。它只会让我的AcasaTab保持活动状态。我应该怎么写脚本？谢谢
This is how the bottom of my <body>looks like:
这是我的底部的<body>样子：
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery-1.11.0.js"></script>
<script>
.......
</script>
This the the script I have tried:
这是我尝试过的脚本：
<script>
$('.nav.navbar-nav > li').on('click', function() {
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
</script>
EDIT:
编辑：
Ok, so I figure it out what the problem was. The jQuery works, but when I click, for example, the Software tab, I get redirected to /software and thus, the Software tab doesn't turn on active because of the redirect. This navigation bar appears on each of my pages. So how can I fix this issue?
好的，所以我弄清楚问题是什么。jQuery 可以工作，但是例如，当我单击“软件”选项卡时，我被重定向到 /software，因此，“软件”选项卡不会因为重定向而处于活动状态。这个导航栏出现在我的每个页面上。那么我该如何解决这个问题呢？
回答by Felix
You can use:
您可以使用：
$('.nav.navbar-nav > li').on('click', function(e) {
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
回答by Ravimallya
Use this code in each and every page.
在每个页面中使用此代码。
$(function() {
var loc = window.location.href;
$(".navbar .navbar-nav > li").each(function() {
if (loc.match('/software')) { // software is the name of the page/slug
$(this).addClass("active");
}
});
});
Or else you can use 'ifelse ifconditions, if you are having limited number of pages.
或者'ifelse if，如果您的页数有限，您可以使用条件。
