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

03.04.16 20:59:04 18.04.16 18:35:01 79

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