作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
你好,我有一个来自 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>
请帮忙,我不知道为什么我的查询不起作用
最佳答案
这可能适用于您的情况,因为您似乎只导航到顶级页面:
改变:
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 标记
。如果你想把它添加到 li
中,也试试这个:
if (status) {
$(this).closest('li').addClass('active');
关于jquery - 如何在 Bootstrap 导航栏中添加事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36106638/
我是一名优秀的程序员,十分优秀!