Разделы
Veselov CV | vvShop © 2008 – 2022
Контакты
email:
skype:
Вернуться
» » » Выделяем текущий пункт меню отдельным стилем явой jQuery

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


Выделяем текущий пункт меню отдельным стилем явой 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);
На правах рекламы: Цоколь дома утепление термопанелями.
#
Большое спасибо!

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

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

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

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

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

$(this).parent().css({ display: 'block' });
#
НУууууу наконец то хоть один рабочий, действительно рабочий пример нашел перепробывал сотни правда..и соттветственно вопрос как сделать буквы белые у строки, которая выделена?
#
А нет у Вас нифига не работает, как и везде вот рабочий вариант

$(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
}
});
#
Огромнейшее спасибо.
#
спасибо большое. очень помог. я чуть чуть модернизировал:
$(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'); // добавляем класс
}
});
});

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

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

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

У меня почему-то везде к пункту меню Главная навешивается стиль active.Почему так?
#
Спасибо! (:
#
Вариант ещё проще, без цикла, на jQuery: http://lesnoy.name/javascript/автоматическое-подсвечивание-текущего-пункта-меню/ :-)
#
Владислав с ajax сайтом такой вариант не пройдет, Ваш скрипт будет работать только с нажатой ссылкой.
#
Игорь, код примера взят как раз с проекта, в котором страницы грузяться с помощью ajax по-умолчанию.

Просто вешаете вызов функции highlightActiveMenuItem на событие изменения нужного элемента DOM-струтуры (который был перезагружен по ajax).
#
Большущее спасибо!
#
Спасибо, отличный вариант!!!)))
#
В первом примере стоит вынести var location = window.location.href; за пределы функции each, а то получается, что мы получаем адрес страницы столько раз, сколько есть пунктов меню. Абсолютно не критично, но все же.
#
Спасибо!!!!
#
Вы меня спасли, Ребята. Спасибо!
#
Ебуца коты!!!!!!!!!!!!!!!!
Наконец то рабочий скрипр!
Что одиночный сто вложеный!!!!!!!!!!
Оставить комментарий
Вверх