你好,我有一个来自bootstap的导航栏,我想在我自动切换页面时添加类avtive。
怎么做。我有我的剧本,但它不会工作。
如何用jquery做到这一点?
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/logogram.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="people.html">people</a></li>
<li><a href="#">gallery</a></li>
<li><a href="inspiration.html">inspiration</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="timeline-job.html">Jobs oportunity</a></li>
<li><a href="#">hirring a chief?</a></li>
<li><a href="register-1.html">login|signup</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script>
var loc = window.location.href;
$('.navbar ul li a').each(function () {
var status = loc.indexOf($(this).attr('href')) > -1;
// $(this).toggleClass('active', status);
if (status) {
$(this).addClass('active');
}
});
</script>
请帮助,我不知道为什么我的查询无效
答案 0 :(得分:0)
这可能适用于您的情况,因为您似乎只是导航到顶级页面:
变化:
var loc = window.location.href;
为:
var path = window.location.pathname;
var loc = path.split("/").pop();
此外:
从:
var status = loc.indexOf($(this).attr('href')) > -1;
到
status = ($(this).attr('href') === loc);
您的方法是将active
课程添加到a tag
。如果您想将其添加到li
,请尝试以下操作:
if (status) {
$(this).closest('li').addClass('active');
答案 1 :(得分:0)
我希望这段代码有效:
var loc = window.location.href;
$('.navbar ul li a').each(function () {
var status = loc.indexOf($(this).attr('href'));
$(this).closest('li').removeClass('active');
console.log(status);
if ( -1 != status ) {
console.log(status);
$(this).closest('li').addClass('active');
}
});
答案 2 :(得分:0)
因此,为.navbar ul li a
运行每项功能以检查window.location.href
是否等于导航栏href,这相当容易。然后添加活动类。
在bootstrap中,您希望将活动类添加到导航栏<li>
标记而不是<a>
标记,因此在以下示例中,我已将活动类添加到{{1的父级但是如果由于某种原因你不希望它添加到li,那么从脚本中删除<a>
,它会将它添加到.parent()
标记。此外,您无需手动将活动类添加到第一个<a>
标记,因为脚本会为您执行此操作,因此您可以从导航栏<li>
标记中删除所有活动类。所有这些都说你的jquery脚本将非常简单:
<li>