获取导航以显示所选页面

Question

我正在努力让我的导航菜单显示 selected 页面。我正在使用 Bootstrap 框架来构建我的网站。这是我的导航菜单：

<nav class="navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="/index.html">Digital Transformation</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="/index.html">Transformation deck</a></li>
        <li><a href="/backgroundInformation.html">Background information</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

据我所知，Bootstrap 使用以下 JS 激活 selected 菜单项，我在 header:

    <script>
      $('label').click(function() {
        $(this).parent('li').toggleClass('active');
      });
    </script>

然而，使用此代码我的主要导航项在页面加载时处于活动状态，但是当我 select 第二项时它保持 'Tranformation deck' 处于活动状态而不是 'Background information'.

我是不是漏掉了什么技巧？任何帮助将不胜感激。

Answer 1

如果你想将点击监听器连接到你的导航项，你的脚本应该是这样的：

<script>
  $('#navbar nav li a').click(function() {
    $(this).parent('li').toggleClass('active');
  });
</script>

您的代码中没有任何 'label' 标记，因此没有任何东西可以附加点击事件处理程序。

Answer 2

 $(function() {
        // this will get the full URL at the address bar
        var url = window.location.href;

        // passes on every "a" tag
        $("#navbar a").each(function() {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
            }
        });
    });

获取导航以显示所选页面

Getting navigation to display the selected page

html

javascript

navigation

jquery

twitter-bootstrap