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

Демо Скачать

Рассмотрим один из способов как выделить активный пункт меню на сайте при помощи 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
За конструктивное замечание благодарим Романа 🙂

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

19 комментария

    1. если вас правильно понял, тогда вам нужно воспользоваться jquery closest. покажите на примере код, так не понятно

  1. Привет. Не знаю жив сайт еще или нет. Такие вопросы:

    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="»> Пользователи

        1. по коду все верно тогда, проверял его на 2 других проектах. в целом рекомендую на PHP данные проверки делать, а не на js, это уже крайний случай. Может быть поможет одна из переменных глобального массива $_SERVER ? Что касается yii2 то не работал с ним, но и там могут быть способы как решаются подобные задачи

          1. какие проверки на php??)))))) Как он поможет сделать кнопку активной? Ясно в общем…. Видимо вы просто скопипастили эту статью, сами вы не понимаете в разработке сайтов… Судя по ответам… На другом сайте хоть что то ответили, хотя бы часть заработала

          2. статью я писал сам) у вас одного не работает код, который приведен в статье, значит дело не в коде. Проверка выглядит следующим образом, например в битриксе вот так
            http://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

            немного теги порезало, но думаю вы поняли суть

  2. Да какой блин php))))) не смеши))) Дело не в коде, а в модуле, который у меня есть в yii2. А точнее, в фреемворке, он мне не подключает мои файлы с js и стили. Так же я не говорил что я брал с этого сайта код, у меня есть готовый, который еще в меню ищет parent если есть вложенность и нажата кнопка во вложенности, то active не снимается с родителя.

    Вопрос был совсем в другом, вы на него не ответили. php такое проверять, это самое последнее, чем я буду заниматься.

  3. вот структура http://prntscr.com/juynhx в нижнем web все работает отлично, а вот в модулях косяки какие то…. консоль ошибки отдает…. Так же и с картинками, имеющиеся подключаются в модулях(которые были в шаблоне) а вот новые, не подключаются

    хз что этот фреемворк хочет от меня…..

  4. Короче разобрался, там надо было кэш почистить, и все заработало… ох уж эти фреемворки….

  5. Добрый день,
    Возникли сложности с назначением класса 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

    Спасибо!

    1. Здравствуйте. Для работы скрипта необходимо указывать всем пунктам в меню классы из статьи. Или, покажите где можно глянуть полностью весь код включая js, посмотрю

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *