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

JQUERY 03.04.16 25.09.21 549
Бесплатные курсына главную сниппетов

Как выделить активный пункт меню? Реализация на 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. Вот он:

<script type="text/javascript"><!— $(‘div.main-menu li’).each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "selected";}); //—></script>

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

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

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

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

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

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