Выделяем текущий пункт меню отдельным стилем явой jQuery

JavaScript # # # #
Выделяем текущий пункт меню отдельным стилем явой jQuery

Допустим нужно выделить текущий пункт меню отдельным стилем как например сейчас выделен \”домой\” если это главная страница сайта или \”блог\” если вы находитесь в разделе блог. Но иногда это сделать просто невозможно (в случае аякса) или сложно из за структуры меню. И тут нам на помощь приходит ява:

Этот сниппет очень прост и заключается в том, что бы из полученного массива ссылок выбрать только ту, у которой атрибут href совпадает с адресом страницы.

$(function () {                                      // Когда страница загрузится
    $('.lmenu a').each(function () {             // получаем все нужные нам ссылки
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;                // получаем адрес ссылки
        if(location == link) {               // при совпадении адреса ссылки и адреса окна
            $(this).addClass('active');  //добавляем класс
        }
    });
});

Нужно выделить и родителей ?
Если у вас древовидное меню, бывает, нужно выделить не только текущую ссылку но и ссылки родительских разделов, для этого используем метод Match(). Код будет таким:

$(function () {                             // когда страница загружена
    $('.lmenu a').each(function () {    // проходим по нужным нам ссылками
        var location = window.location.href // переменная с адресом страницы
        var link = this.href                // переменная с url ссылки
        var result = location.match(link);  // результат возвращает объект если совпадение найдено и null при обратном

        if(result != null) {                // если НЕ равно null
            $(this).addClass('current');    // добавляем класс
        }
    });
});

UPD Еще один способ

(function($){ 
	$(document).ready(function(){
		var pathname = window.location.pathname,
			page = pathname.split(/[/ ]+/).pop(),
			menuItems = $('#main_menu a');
		menuItems.each(function(){
			var mi = $(this),
				miHrefs = mi.attr("href"),
				miParents = mi.parents('li');
			if(page == miHrefs) {
				miParents.addClass("active").siblings().removeClass('active');
			}
		});
	});
})(jQuery);
Рекомендуем к просмотру
0 comments
  1. Demath
    Demath
    16.07.2012 at 02:01

    Большое спасибо!

    Перелопатил несметное множество сайтов по данной теме, и Вас наиболее читабельно и понятно.

    Подскажите, пожалуйста, как добавить в родительский div текущего пункта меню style="display: block;" ?

    Reply
  2. utz0r2
    utz0r2
    16.07.2012 at 10:15

    не совсем понятен вопрос, что мешает в стиль .current прописать display:block

    Reply
  3. Demath
    Demath
    16.07.2012 at 11:38

    Есть вертикальное слайд-меню, с такой структурой:

    Раздел 1 (не ссылка – название)
    пункт 1.1
    пункт 1.2
    ………….
    Раздел 2 (не ссылка – название)
    пункт 2.1
    пункт 2.2
    ………….
    и т.д.

    в котором по умолчанию разделы скрыты (display: none). Нужно было, чтобы когда посетитель, когда попал на какую-либо страницу из этого меню, то раздел текущего пункта меню был открыт, а сам пункт выделен.

    Но я уже разобрался и успешно установил; нужно было просто добавить перед (или после) $(this).addClass('active') строку

    $(this).parent().css({ display: 'block' });

    Reply
  4. Виктор
    Виктор
    28.04.2013 at 23:18

    НУууууу наконец то хоть один рабочий, действительно рабочий пример нашел перепробывал сотни правда..и соттветственно вопрос как сделать буквы белые у строки, которая выделена?

    Reply
  5. Виктор
    Виктор
    29.04.2013 at 00:32

    А нет у Вас нифига не работает, как и везде вот рабочий вариант

    $(document).ready(function() {
    var now_url=location.href; //получаем урл текущей страницы
    if (now_url.split('/')[3]!=0) { // проверяем, есть ли что-то после 3 слеша в урле, если есть – идем дальше
    $.each($("a[href*=/"+now_url.split('/')[3]+"]"), // для каждой ссылки, в которой есть слово после третьего слеша
    function(){$(this).addClass('now');}); // добавляем класс now
    }
    });

    Reply
  6. Константин
    Константин
    04.02.2014 at 14:52

    Огромнейшее спасибо.

    Reply
  7. dimavarl
    dimavarl
    11.02.2014 at 20:23

    спасибо большое. очень помог. я чуть чуть модернизировал:
    $(function () {
    $('#mainmenu a:first').addClass('selected'); // при загрузке страницы сразу даем класс первой ссылке, то есть индексной странице
    $('#mainmenu a').each(function () { // проходим по нужным нам ссылками
    var location = window.location.href; // переменная с адресом страницы
    var link = this.href; // переменная с url ссылки
    var result = location.match(link); // результат возвращает объект если совпадение найдено и null при обратном

    if(result != null) { // если НЕ равно null
    $('#mainmenu a:first').removeClass('selected'); // сначала удаляем класс с индексной страницы
    $(this).addClass('selected'); // добавляем класс
    }
    });
    });

    так все работает

    Reply
  8. Эльдар
    Эльдар
    29.03.2014 at 18:36

    Премного вам благодарен за такой уникальнейший скрипт)

    Как сделать так чтобы при открытии поста , не исчезала активная ссылка в меню??

    Reply
  9. Вадим
    Вадим
    29.07.2014 at 02:36

    Во втором примере, всегда выделяется пункт Главная, со ссылкой на главную сайта. Как это можно поправить?

    Reply
  10. Sergey
    Sergey
    14.11.2014 at 00:26

    Я не могу понять следующее, первый код отлично работает на менюшку. Когда я перехожу в 1 раздел допустим, он выделяется – отлично. Дальше в этом разделе я перехожу на его следующую страницу и выделение убирается. Что делать в этом случае? Совсем не могу разобраться(

    Reply
  11. Александр
    Александр
    29.12.2014 at 23:19

    Благодарю!
    Действительно работающий пример.Всё работает!

    Хм…а если к примеру родительский раздел не совпадает.
    т.е.
    /product/avtoshiny/">Автошины</a>
    /komplect/antenny/">Антенны</a>
    То тут как быть?
    Продукция и Автошины подсвечиваются.
    Продукция не подсвечивается, а Антенны подсвечиваются.

    У меня почему-то везде к пункту меню Главная навешивается стиль active.Почему так?

    Reply
  12. Артём
    Артём
    22.05.2015 at 17:16

    Спасибо! (:

    Reply
  14. Игорь
    Игорь
    25.05.2015 at 09:27

    Владислав с ajax сайтом такой вариант не пройдет, Ваш скрипт будет работать только с нажатой ссылкой.

    Reply
  15. Владислав
    Владислав
    26.05.2015 at 12:54

    Игорь, код примера взят как раз с проекта, в котором страницы грузяться с помощью ajax по-умолчанию.

    Просто вешаете вызов функции highlightActiveMenuItem на событие изменения нужного элемента DOM-струтуры (который был перезагружен по ajax).

    Reply
  16. Марина
    Марина
    08.10.2015 at 09:30

    Большущее спасибо!

    Reply
  17. Максим
    Максим
    28.12.2015 at 16:36

    Спасибо, отличный вариант!!!)))

    Reply
  18. Alexander Borshak
    Alexander Borshak
    14.04.2016 at 17:23

    В первом примере стоит вынести var location = window.location.href; за пределы функции each, а то получается, что мы получаем адрес страницы столько раз, сколько есть пунктов меню. Абсолютно не критично, но все же.

    Reply
  19. Сергей
    Сергей
    05.01.2017 at 16:33

    Спасибо!!!!

    Reply
  20. Anna
    Anna
    06.06.2017 at 11:49

    Вы меня спасли, Ребята. Спасибо!

    Reply
  21. Аноним
    Аноним
    27.08.2017 at 15:47

    Ебуца коты!!!!!!!!!!!!!!!!
    Наконец то рабочий скрипр!
    Что одиночный сто вложеный!!!!!!!!!!

    Reply
Оставить комментарий

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