Как выделить активный пункт меню?

∘JQUERY 03.04.16 25.09.21 559

Как выделить активный пункт меню? Реализация на jQuery.

Частенько появляется необходимость выделить активный пункт меню, то есть, переходите вы по ссылке в главном меню сайта, и будучи на этой странице нажатый пункт меню каким-то образом выделяется. Чаще всего, для этого всего лишь нужно добавить уникальный класс для тега, в котором находится ссылка. А дальше дело за стилями CSS. К примеру, меню выглядит примерно так:

<div class="main-menu"> <ul> <li><a href="/home/">Главная</a></li> <li><a href="/catalog/">Каталог</a></li> <li><a href="/about/">О нас</a></li> </ul> </div>

Предположим, что CSS-стили прописаны таким образом, чтобы правильно обрабатывать пункты меню в данной конструкции. Все что потребуется, так это к тегу li добавить класс, например «selected». То есть, находясь на странице Каталог (/catalog/), в итоге, ваш код меню должен выглядеть так:

<div class="top_menu"> <ul> <li><a href="/home/">Главная</a></li> <li class="selected"><a href="/catalog/">Каталог</a></li> <li><a href="/about/">О нас</a></li> </ul> </div>

Все что для этого потребуется, так несложный код на JavaScript. Вот он:

Этот код можно вставить, например, сразу после div`a, в котором находится меню.

Будет нелишним сообщить, что должна быть подключена библиотека JQuery.

Если надо, чтобы работало без li используем

$("div.menu a").each(function () {if (this.href == location.href) this.className = "active";});

Где класс слоя, на котором находится меню называется menu, а класс на который должен меняться пункт называется active.

на главную сниппетов