Выделяем текущий пункт меню отдельным стилем явой 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);
Demath
16.07.2012 at 02:01Большое спасибо!
Перелопатил несметное множество сайтов по данной теме, и Вас наиболее читабельно и понятно.
Подскажите, пожалуйста, как добавить в родительский div текущего пункта меню style="display: block;" ?
utz0r2
16.07.2012 at 10:15не совсем понятен вопрос, что мешает в стиль .current прописать display:block
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' });
Виктор
28.04.2013 at 23:18НУууууу наконец то хоть один рабочий, действительно рабочий пример нашел перепробывал сотни правда..и соттветственно вопрос как сделать буквы белые у строки, которая выделена?
Виктор
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
}
});
Константин
04.02.2014 at 14:52Огромнейшее спасибо.
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'); // добавляем класс
}
});
});
так все работает
Эльдар
29.03.2014 at 18:36Премного вам благодарен за такой уникальнейший скрипт)
Как сделать так чтобы при открытии поста , не исчезала активная ссылка в меню??
Вадим
29.07.2014 at 02:36Во втором примере, всегда выделяется пункт Главная, со ссылкой на главную сайта. Как это можно поправить?
Sergey
14.11.2014 at 00:26Я не могу понять следующее, первый код отлично работает на менюшку. Когда я перехожу в 1 раздел допустим, он выделяется – отлично. Дальше в этом разделе я перехожу на его следующую страницу и выделение убирается. Что делать в этом случае? Совсем не могу разобраться(
Александр
29.12.2014 at 23:19Благодарю!
Действительно работающий пример.Всё работает!
Хм…а если к примеру родительский раздел не совпадает.
т.е.
/product/avtoshiny/">Автошины</a>
/komplect/antenny/">Антенны</a>
То тут как быть?
Продукция и Автошины подсвечиваются.
Продукция не подсвечивается, а Антенны подсвечиваются.
У меня почему-то везде к пункту меню Главная навешивается стиль active.Почему так?
Артём
22.05.2015 at 17:16Спасибо! (:
Владислав
24.05.2015 at 20:39Вариант ещё проще, без цикла, на jQuery: http://lesnoy.name/javascript/автоматическое-подсвечивание-текущего-пункта-меню/ 🙂
Игорь
25.05.2015 at 09:27Владислав с ajax сайтом такой вариант не пройдет, Ваш скрипт будет работать только с нажатой ссылкой.
Владислав
26.05.2015 at 12:54Игорь, код примера взят как раз с проекта, в котором страницы грузяться с помощью ajax по-умолчанию.
Просто вешаете вызов функции highlightActiveMenuItem на событие изменения нужного элемента DOM-струтуры (который был перезагружен по ajax).
Марина
08.10.2015 at 09:30Большущее спасибо!
Максим
28.12.2015 at 16:36Спасибо, отличный вариант!!!)))
Alexander Borshak
14.04.2016 at 17:23В первом примере стоит вынести var location = window.location.href; за пределы функции each, а то получается, что мы получаем адрес страницы столько раз, сколько есть пунктов меню. Абсолютно не критично, но все же.
Сергей
05.01.2017 at 16:33Спасибо!!!!
Anna
06.06.2017 at 11:49Вы меня спасли, Ребята. Спасибо!
Аноним
27.08.2017 at 15:47Ебуца коты!!!!!!!!!!!!!!!!
Наконец то рабочий скрипр!
Что одиночный сто вложеный!!!!!!!!!!