Функция Jquery для установки активной вкладки навигации с помощью URL выбирает больше, чем следует

Question

У меня есть функция Jquery, которую я использую для установки «активного» класса в моих навигационных привязках, для этого он использует URL.Функция работает по большей части, но проблема в том, что, когда вкладка 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 элементов, и каждый элемент имеет общий 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>

---

Любая помощь будет оценена, и я уверен, что это что-то очевидное, но я просто не вижу ее.

Заранее спасибо.

Твист

Answer 1

Вы используете атрибут ', содержащий селектор ', который выбирает любой, имеющий данную подстроку "article.php? ContentID = 1".
Так что это соответствует всем следующим
" article.php? ContentID = 1 ",
" article.php? ContentID = 1 0",
" article.php? ContentID =1 1 ",
" article.php? ContentID = 1 2 "и
" some_ article.php? ContentID = 1 независимо "

Просто удалите *
'.nav-item a[href="'+page+'"]'

Answer 2

Интересный вопрос ... Ключ должен был иметь 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>