26/07/2019
Подсветка активного пункта меню с помощью jQuery. Это самый простой способ определения ссылки текущей страницы

HTML:

<nav class="main-menu">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/advantages">Преимущества</a></li>
    <li><a href="/services">Услуги</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

JavaScript:

$(function() {
  $(".main-menu [href]").each(function() {
    if (this.href == window.location.href) {
      $(this).addClass("active");
    }
  });
});

Осталось стилизовать активный пункт меню

a.active {
  color: #654321;
}

Подстветка вложенного пункта меню

Первый вариант отлично работает для одноуровнего меню. Но если путь будет например такой:

/blog/coding/2019-01-19-podsvetka-aktivnogo-punkta-menyu-s-pomoshhyu-jquery.html

То первый вариант нам не подойдёт. Чтобы реализовать подстветку для вложенного активного пункта меню нужно использовать следующий jQuery код

$(".main-menu a").each(function() {
  if ( (window.location.pathname.indexOf( $(this).attr('href') ) ) > -1) {
    $(this).addClass('active');
  }
});

Полезные ссылки

  • Шпаргалка по jQuery
➤ ➤