Подсветка активного пункта меню с помощью 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 () {
  /* определяем url текущей страницы и записываем его в переменную */
  var place = window.location.href;
  var actual = '/' + place.split('/').pop();

  /* проверяем, является ли адрес ссылки текущим URL адресом */
  $('.main-menu li').each(function () {
      var link = $(this).find('a').attr('href');

      /* если является, добавляем класс */
      if (actual == link) {
          $(this).addClass('active');
      }
  });
});

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

.active a {
  color: #654321;
}

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

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