Изменение стиля навигации с помощью jQuery / Javascript

Question

Я сейчас работаю над панелью навигации и хотел пометить текущую страницу ее элементом навигации с помощью class = "active-link", чтобы я мог добавить определенный стиль c, указывающий, на какой странице вы находитесь. Однако, когда я использую приведенный ниже код jquery, он добавляет класс ко всем трем элементам навигации одновременно, когда вы находитесь на главной странице ("/").

Как я могу убедиться, что на главной странице с URL "/" он только добавляет класс к элементу навигации для "Home".

<nav>
  <a class="nav-link" href="/">Home</a>
  <a class="nav-link" href="/groups">Groups</a>
  <a class="nav-link" href="/deals">Deals</a>
</nav>

<script>
    $(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active-link');
});
</script>

Здесь я нашел оригинальный код: https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/

Answer 1

a[href^="/"] Выбирает каждый тег привязки, значение атрибута href которого начинается с "/". Таким образом, когда вы находитесь на домашней странице, он будет соответствовать всем URL-адресам. Вы должны изменить его с a[href^="/"] на a[href="/"] (оператор сменить с ^= на =).
Ваш скрипт будет выглядеть так:

<script>
    $(function() {
  $('nav a[href="/' + location.pathname.split("/")[1] + '"]').addClass('active-link');
});
</script>

Редактировать

Как указывает @ freedomn-n , он не будет работать для подстраниц. Для этого вам нужно будет добавить дополнительные логи c.