获取导航以显示所选页面答案

【问题标题】：Getting navigation to display the selected page获取导航以显示所选页面
【发布时间】：2016-06-01 12:04:17
【问题描述】：

我正在努力让我的导航菜单显示所选页面。我正在使用 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>

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

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

【问题讨论】：

上层代码看不到标签

标签： javascript jquery html twitter-bootstrap navigation

【解决方案1】：

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

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

您的代码中没有任何“标签”标签，因此没有任何可以附加点击事件处理程序的内容。

【讨论】：

【解决方案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");
            }
        });
    });

【讨论】：