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>

但是使用此代码时，我的主要导航项在页面加载时处于活动状态，但是当我选择第二个项目时，它会保留“转换卡片”。积极而不是＆＃39;背景信息＆＃39;。

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

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

获取导航以显示所选页面

2 个答案: