twitter-bootstrap Bootstrap 3 - 导航栏活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19094461/
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 3 - Navbar active class
提问by user2831179
$("#houses a:contains('Houses')").parent().addClass('active');
<body id="houses">
<li><a href="houses.php">Houses</a></li>
</body>
When I click on the nav(houses), at the inspect element it adds the class active but it doesn't change the color of the nav. adds class but no effect.
当我单击导航（房屋）时，在检查元素处，它添加了活动类，但不会更改导航的颜色。添加类但没有效果。
I have been trying to follow a tutorial. It seems to work fine there, just not for me.
我一直在尝试遵循教程。它似乎在那里工作得很好，只是不适合我。
回答by Shekhar K. Sharma
Gotcha,
明白了，
You are missing navbar theme class on .navbardiv. Add class .navbar-defaultto .navbarand all done.
您缺少.navbardiv上的导航栏主题类。添加类.navbar-default到.navbar并全部完成。
Updated HTML
更新的 HTML
<section class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="index.php">New Listings</a>
</li>
<li><a href="homes.php">Houses</a>
</li>
<li><a href="land.php">Land</a>
</li>
<li><a href="mortgagecalc.php">Mortgage Calculator</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">For Pros<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li> <a tabindex="-1" href="#">Register for Caraga Homes</a>
</li>
<li class="divider"></li>
<li> <a tabindex="-1" href="#">Post a listing for free</a>
</li>
</ul>
<!-- drop down Menu -->
</li>
</ul>
</section>
And all done. Demo: http://jsfiddle.net/shekhardesigner/r2qaZ/
一切都完成了。演示：http: //jsfiddle.net/shekhardesigner/r2qaZ/
回答by user3254496
<script type="text/javascript">
jQuery(document).ready(function($){
var url = window.location.href;
$('.nav a[href="'+url+'"]').parent().addClass('active');
});
</script>
