获取导航以显示所选页面

Question

我正在努力让我的导航菜单显示所选页面。 我正在使用 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 使选定的菜单项处于活动状态，我在标题中拥有该菜单项：

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

但是，

使用此代码，我的主要导航项在页面加载时处于活动状态，但是当我选择第二项时，它将"Tranformation deck"保持活动状态，而不是"背景信息"。

我在这里错过了一个技巧吗？ 任何帮助将不胜感激。

Answer 1

如果要将

单击侦听器连接到导航项，则脚本应如下所示：

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

代码中没有任何"标签"标记，因此没有任何内容可以附加单击事件处理程序。

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");
            }
        });
    });