
Активный пункт меню через 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 на сайте.