Активный пункт меню через JS

Активный пункт меню через JS

Иногда возникают задачи, когда необходимо подсветить пункт меню на сайте (добавить активный пункт меню) в зависимости от страницы, на которой мы находимся. В свое время я тоже изрядно помучился с этим вопросом, но в большинстве случаев вопросы решаются довольно просто.

Итак, задача, которая стоит перед нами: при переходе к той или иной странице должен подсвечиваться соответствующий пункт меню. Для этого ему необходимо присвоить какой то класс, пусть в нашем случае будет active (для примера).

К примеру наш HTML-код меню выглядит следующим образом:

<ul class="menu">
  <li><a href="#" class="link-item">Главная</a></li>
<li><a href="#" class="link-item">О нас</a></li>
<li><a href="#" class="link-item">Контакты</a></li>
</ul>

Чтобы выделить текущий пункт меню, в файл скриптов вставляем функцию:

$(".link-item").each(function () {
        var location = window.location.protocol + '//' + window.location.host + window.location.pathname;

        var link = this.href;
        if(link == location){
            $(this).addClass('active');
            $(this).parent().addClass('show');

        }
    });

Что мы сделали?

Просматриваем все ссылки с классом link-item (в принципе можно было указать и «.menu li a» ). В переменную location записываем текущий адрес страницы. В переменную link пишем ссылки из пунктов меню. При совпадении данных значений (с помощью оператора IF) присваиваем текущему пункту меню класс active. При необходимости (бывают такие задачи) мы можем присвоить какой-то класс и родительскому элементу. В примере класс show будет присвоен элементу списка li.

Не буду напоминать о том, что необходимо подключение jQuery и описание классов в файле CSS.

Вот такими несложными маневрами можно добавить активный пункт меню через JS на сайте.