javascript - 使用 url 设置活动导航选项卡的 Jquery 函数选择的数量超出了应有的范围

Question

我有一个 Jquery 函数，用于在导航锚点上设置“活动”类，它使用 URL 来执行此操作。该函数在大多数情况下起作用，但问题是当Tab 1处于活动状态时，它也将选项卡10、11和12设置为活动。

下面的代码是我正在使用的，它page在 console.log 中正确输出，它也适用于除项目 1 之外的所有其他链接，如屏幕截图所示。

$(function(){
   var url = window.location.href;
   var page = url.substr(url.lastIndexOf('/')+1 );
   $('.nav-item a[href*="'+page+'"]').addClass('active');
   console.log(page);
 });

---

nav 相当大，所以我将分享一个精简版，请记住，中间 ul 实际上总共包含 12 个 Item，每个 item 共享 url

article.php?contentID=

之后=是从 1 到 12 的项目编号。

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <ul class="navbar-nav" >
    <li><a class="navbar-brand" href="articles.php">Twist</a></li>
  </ul>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link " href="article.php?contentID=1">Item 1</a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="commentary.php">Commentary</a>
      </li>
      <li>
        <a id="logLink" class="nav-link" href="logout.php">Log out</a>
      </li>
    </ul>
  </div>
</nav>

---

任何帮助将不胜感激，我很确定这很明显，但我只是没有看到。

提前致谢。

捻

标签： javascriptjqueryhtmlbootstrap-4navigation

Answer 1

有趣的问题......关键是要让href$="='+page+'"添加类的语句active变为：

$('.nav-item a[href$="=' + page + '"]').addClass('active');

下面的工作片段- 更改页面的硬编码值以测试自己：

$(function() {
  var url = window.location.href;
  var page = 1 //url.substr(url.lastIndexOf('/')+1 );
  $('.nav-item a[href$="=' + page + '"]').addClass('active');
  console.log('looking for page#:', page);
});

a.nav-link.active {
  background: lightgreen;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



<div class="container">
  <h2>Nav</h2>
  <p>Basic horizontal menu:</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#article.php?contentID=1">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#article.php?contentID=2">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#article.php?contentID=10">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#article.php?contentID=11">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#article.php?contentID=21">Link</a>
    </li>

    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>