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

Демо Скачать

Рассмотрим один из способов как выделить активный пункт меню на сайте при помощи jQuery. Конечно, это лучше делать на стороне сервера, но мы ведь не ищем легких путей 🙂 .

jQuery — как выделить активный пункт меню по текущему URL

Без долгих лирических вступлений, приступим.

Вот наш HTML:

В атрибутах href записаны ссылки на соседние разделы. То есть, предполагается что скрипт будет работать только на этих 3 страницах.

Для написания такого скрипта нам нужно получить текущий URL. Чтобы это сделать воспользуемся document.location.href — и проверим есть ли в наших пунктах меню совпадение с текущим URL.

Почему > -1 ? Данный метод возвращает -1, если ничего не нашел, и любое совпадение будет означать что мы находимся на текущей странице (при условии что у вас нет ссылок на родительские разделы).

автор: Dmitriy

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

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

    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. Короче разобрался, там надо было кэш почистить, и все заработало… ох уж эти фреемворки….

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

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