Рассмотрим один из способов как выделить активный пункт меню на сайте при помощи jQuery. Конечно, это лучше делать на стороне сервера, но мы ведь не ищем легких путей 🙂 .
jQuery – как выделить активный пункт меню по текущему URL
Без долгих лирических вступлений, приступим.
Вот наш HTML:
<div class="left-categorys-menu"> <ul class="category-sidebar__list"> <li class="category-sidebar__item"><a href="/catalog/prazdnik/podarki_dlya_muzhchin/">Подарки для мужчин</a></li> <li class="category-sidebar__item"><a href="/catalog/prazdnik/podarki_dlya_zhenshchin/">Подарки для женщин</a></li> <li class="category-sidebar__item"><a href="/catalog/prazdnik/podarki_dlya_detey/">Подарки для детей</a></li> </ul> </div>
В атрибутах href записаны ссылки на соседние разделы. То есть, предполагается что скрипт будет работать только на этих 3 страницах.
Для написания такого скрипта нам нужно получить текущий URL. Чтобы это сделать воспользуемся document.location.href – и проверим есть ли в наших пунктах меню совпадение с текущим URL.
<script> (function($){ //find active url in menu var $curURL = document.location.href; $('.category-sidebar__item').each(function() { var $linkHref = $(this).find('a').attr('href'); if ($curURL.indexOf($linkHref) > -1 && $curURL.length == $linkHref.length) { $(this).addClass('active'); } }); })(jQuery); </script>
Почему > -1 ? Данный метод возвращает -1, если ничего не нашел, и любое совпадение будет означать что мы находимся на текущей странице (при условии что у вас нет ссылок на родительские разделы).
UPDATE: В код была добавлена проверка на длину строки, т.к. выделяло в том числе родительские пункты. Проверка выглядит так:
$curURL.length == $linkHref.length
За конструктивное замечание благодарим Романа 🙂
Долго искал. Это то, что нужно! Спасибо
А как быть , если есть ссылка на родительские разделы?
если вас правильно понял, тогда вам нужно воспользоваться jquery closest. покажите на примере код, так не понятно
Привет. Не знаю жив сайт еще или нет. Такие вопросы:
1)как поймать страницы пагинации, допустим нажимаю на кнопку категории в меню, открывается список категорий, снизу есть пагинация 1-2-3 и т.д. На первой странице нормально все отрабатывает, кнопка выделяется, когда хожу по пагинации, active уходит… Пока в скриптах не очень, только разбираюсь
2) Как настроить выделение активной кнопки в меню, в модуле? Пользуюсь yii2, вставил тот же код, что и работает у меня в основной части сайта, но в админке не хочет вставлять active к li… Замучался….Вставляет пустой класс, и конечно же стили не подключаются
вот код:
$(function() {
var pathname_url = window.location.pathname;
var href_url = window.location.href;
$(‘.menu li’).each(function () {
var link = $(this).find(‘a’).attr(‘href’);
if (pathname_url == link || href_url == link) {
$(this).addClass(‘active’);
$(this).parent().parent().addClass(‘active’);
}
});
});
<a href="”> Статьи / Блоги
<a href="”> Категории
<a href="”> Пользователи
Блин, не прошел код меню, вот скрин http://prntscr.com/juk6pp
$(‘.category-sidebar__item’).each(function() {
поменять на
$(‘.nav.menu’).each(function() {
не понимаю как это отвечает на мои вопросы… я точно такой же код дал
по коду все верно тогда, проверял его на 2 других проектах. в целом рекомендую на PHP данные проверки делать, а не на js, это уже крайний случай. Может быть поможет одна из переменных глобального массива $_SERVER ? Что касается yii2 то не работал с ним, но и там могут быть способы как решаются подобные задачи
какие проверки на php??)))))) Как он поможет сделать кнопку активной? Ясно в общем…. Видимо вы просто скопипастили эту статью, сами вы не понимаете в разработке сайтов… Судя по ответам… На другом сайте хоть что то ответили, хотя бы часть заработала
статью я писал сам) у вас одного не работает код, который приведен в статье, значит дело не в коде. Проверка выглядит следующим образом, например в битриксе вот так
https://forwww.com/bitrix-how-to-show-information-on-the-main-page/
В целом весь механизм выглядит следующим образом,
1. запускаете цикл в котором хранятся названия меню и ссылки на него.
2. в самом цикле делаете проверку
a class="menu-item
< ? if ($_SERVER['HTTP_REFERER'] == $item['LINK']) { echo 'active'; } ? >"
< ? =$item['NAME'] ? >/a
немного теги порезало, но думаю вы поняли суть
Да какой блин php))))) не смеши))) Дело не в коде, а в модуле, который у меня есть в yii2. А точнее, в фреемворке, он мне не подключает мои файлы с js и стили. Так же я не говорил что я брал с этого сайта код, у меня есть готовый, который еще в меню ищет parent если есть вложенность и нажата кнопка во вложенности, то active не снимается с родителя.
Вопрос был совсем в другом, вы на него не ответили. php такое проверять, это самое последнее, чем я буду заниматься.
вот структура http://prntscr.com/juynhx в нижнем web все работает отлично, а вот в модулях косяки какие то…. консоль ошибки отдает…. Так же и с картинками, имеющиеся подключаются в модулях(которые были в шаблоне) а вот новые, не подключаются
хз что этот фреемворк хочет от меня…..
Короче разобрался, там надо было кэш почистить, и все заработало… ох уж эти фреемворки….
кеш это та еще херь) особенно дефолтный в гугл хроме 🙂
да нет, там в самом фреемворке все сохраняется в папку… бредятина
Добрый день,
Возникли сложности с назначением класса nav__list-item active-nav пункту меню, если активен любой из его дочерних элем-в. Если дочерних пунктов нет – этот класс назначается единственному элем-ту, если он активен.
Мой html:
work
case studies
boring masonry
boring masonry
floating title
gallery version
<a href=”/st” class=”cursor-link animsition-link”>studio
news
contact
Спасибо!
Здравствуйте. Для работы скрипта необходимо указывать всем пунктам в меню классы из статьи. Или, покажите где можно глянуть полностью весь код включая js, посмотрю
Спасибо за помощь! Все работает, лучший блог)
🙂 Спасибо Вам