Активный пункт меню

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

$(function(){
	$('nav ul li a').each(function(){
		if(document.location.href.indexOf($(this).attr('href')) > 0){
			$(this).parent().addClass('active');
		}
	});
});

Вышеприведённый код подразумевает что для навигационного меню вы используете тэг nav, введённый для этих целей в html 5. И присваиваете пункту меню, который содержит ссылку css-класс active. В подавляющем большинстве случаев этот способ сработает, но человек хоть не много разбирающийся в javascript спросит:

А как же быть, если в меню ссылка на индекс указана просто одним слешем, абсолютный путь к корню сайта?

. Да, поскольку в моём примере идёт поиск подстроки, то этот пункт будет подсвечен всегда. Что бы обойти такое недоразумение можно код несколько изменить:

$(function(){
	$('nav ul li a').each(function(){
		if(document.location.pathname == $(this).attr('href')){
			$(this).parent().addClass('active');
		}
	});
});

Этот вариант более надёжен и отработает, когда строка в адресе после имени домена и адрес ссылки на эту страницу полностью одинаковы. Однако первый пример я привёл не случайно. Он мне пригодился для того чтобы подсвечивать ссылку на текущую страницу не зависимо от таких вещей как закрывающий слеш после имени директории, есть индексный файл там или нет, какое расширение у файла, в общем для конкретной реализации, где адреса могли встречаться в более вольном стиле.

Эта запись была опубликована в рубрике Статьи-заметки и отмечена метками , , , , . Добавить в закладки ссылку.

22 в ответ на Активный пункт меню:

  1. Gorobez пишет:

    Если можешь опиши с комментами что каждая строчка делает, а то у меня не работает и я понять не могу почему.

    • samizdam пишет:

      да без проблем)) для второго варианта, т.к. он подходит для большинства случаев.
      первая строчка – это стандартное начало кода jQuery, означает что надо запустить функцию после загрузки страницы.
      2 – получает все ссылки которые лежат внутри тега li, которые находятся в блоке nav. затем следует each – цикл который вызывает следующую за ним функцию для каждого элемента из набора, который указан перед ним. в нашем случае для каждой ссылки, которая в li, которые в nav.
      3 – в этой функции проверяется условие, равен ли путь в адресной строке содержимому атрибута href.
      4 – если равен: значит эта ссылка является активной, тогда присваиваем её родителю класс active.
      чтобы код работал у вас должна быть структура меню соответствующая, или код подогнать. что-то вроде

      	<nav>
      		<li><a href="/" rel="nofollow">/</a></li>
      		<li><a href="/index" rel="nofollow">index</a></li>
      		<li><a href="/reg" rel="nofollow">reg</a></li>
      		<li><a href="/top" rel="nofollow">top</a></li>
      	</nav>

      PS: rel=”nofollow” – это каварный ВП ставит, не обращайте внимания, к делу отношения не имеет

  2. Gorobez пишет:

    Ой спасибо )). Скажи , а что в htm5 тег ul не нужен ?

    • samizdam пишет:

      нужен. это мой косяк)) сейчас посмотрел на реакцию валидатора, и понял, что нужен ul внутри nav. примеры поправил.
      чего-то меня занесло что можно напрямую nav для списков меню использовать… ИЧСХ, работало корректно везде))

      • Gorobez пишет:

        Это мелочи… Вот можно не употреблять – не нужен он уже.
        Скрипт работает и это главное , но я не пойму как сделать чтоб класс “active” добавлялся именно к link.html , а не к ?
        любое шаманство с $(‘nav ul li a’) или $(‘a’) добавляет к тегу .

  3. samizdam пишет:

    если вам над именно к ссылке применить класс, то просто

    $(this).addClass('active');

    потому что parent() – это указатель на родителя, чем в данном контексте является li

  4. Gorobez пишет:

    Это опять я. Помоги разобраться . все получается только
    немогу подсветить “blog” когда переходит по другим страницам domain/blog/page/2/

    • samizdam пишет:

      то есть когда находишься на странице типа domain/blog/page/2/, не подсвечивается ссылка на где href=”blog”? а код из первого примера пробовал? он должен прокатить, т.к. там идёт поиск подстроки. а во втором строгое сравнение на равенство строк.

  5. Masterjoda пишет:

    Сенькью веримач! Яваскрипт рулез, пхп втопку. (не ну вы видели решение данной темы на пхп?! Зачем так усложнять то =/)
    Автору +1

    • samizdam пишет:

      Да, решать мелкие проблемы клиентского интерфейса на стороне сервера, не совсем разумно. Хотя доводилось видеть рецепты на php именно для этой задачи.

  6. demos пишет:

    $(function(){
    $('nav ul li a').each(function(){
    if(document.location.href.indexOf($(this).attr('href')) > 0){
    $(this).parent().addClass('active');
    }
    });
    });

    .active{background: red;}

    1111
    2222
    3333
    4444

    Почему то этот код не работает.

    • samizdam пишет:

      вероятно, потому что у вас ссылки не заключены в <nav><ul><li>?
      ЗЫ: прошу прощения за запоздалый ответ, в последнее время совсем не до блога.

  7. Renton пишет:

    Здравствуйте.
    Я не большой любитель докучать вопросами, но я уже бьюсь с этой напастью 3ю ночь!
    меню вот такое у меня:

    Главная
    Портфолио
    Об авторе
    Контакты

    Я правильно понимаю, что в моем случае первая строка скрипта должна выглядеть:
    $(‘ul#menu li a’).each(function(){
    или я ошибаюсь?
    Сразу еще пару ламерских вопросов:
    1.скрипт в head пихать или перед\после меню?
    2. jquery у меня подключен 1.10.0. Он подходит для этих целей?)

  8. Renton пишет:

    Пардон, не дочитал что в CODE надо засовывать.
    Вот:

    Главная
    Портфолио
    Об авторе
    Контакты

  9. Renton пишет:

    Черт(((
    В общем суть: ul с id “menu” в нем li (без id и классов), в которых ссылки.
    Извиняюсь за флуд, не со зла.

  10. tremolin пишет:

    А как сделать, чтобы подсвеченная ссылка становилась не активной? Т.е. заменялась текстом и просто указывала пользователю на его местонахождение.

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

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>