如何在bootstrap导航栏中添加活动类

时间:2016-03-19 20:15:16

标签: jquery css twitter-bootstrap

你好,我有一个来自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>

请帮助,我不知道为什么我的查询无效

3 个答案:

答案 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>