Выделение активного пункта меню, скрипт

10.01.2019

Выделение активного пункта меню, скрипт

Рубрика: Разработчику

Наверное у каждого начинающего разработчика при создании навигации на сайте возникал вопрос реализации выделения активного пункта меню.

Пример навигационного меню:

<ul class="navigation"> <li><a href="/">Главная страница</a></li> <li><a href="/about">О компании</a></li> <li><a href="/contacts">Контакты</a></li> </ul>

 

Для облегчения работы ниже представлена небольшая JavaScript функция, добавляющая ссылке, у которой тег href совпадает с url адресом браузера, новый класс active.

$(document).ready(function() {
  $('ul.navigation li a').each(function(){
    var href = $(this).attr('href');
    var pos = document.location.pathname.indexOf(href);
    if( pos >= 0 && href != '/' || href == document.location.pathname ){
      $(this).parent().addClass('active');
    }
  });
});

 

После добавления JavaScript кода в подвал сайта добавьте в CSS файл вашего сайта стиль для класса active и пункты навигационного меню будут автоматически менять свой стиль.

Пример настройки стиля меню:

ul.navigation {}
ul.navigation li {}
ul.navigation li a {}
ul.navigation li:active a {}

Комментарии: +1

Чтобы оставить комментарий выполните вход на сайт или зарегистрируйтесь

ВХОД / РЕГИСТРАЦИЯ
Ваш email:

 

Последние комментарии

MUST-STYLE22.04.2022 / 17:00:29
WORKBox CRM ver.1.13 → Добавлена статистика сдело...
MUST-STYLE22.04.2022 / 16:58:10
WORKBox CRM ver.1.12 → В настройки добавлена возм...
MUST-STYLE23.02.2022 / 12:46:28
Спасибо за предложение. Примем к сведению...
Иван12.02.2022 / 23:05:14+1
Малый бизнес в сфере гостеприимства очень нуждает...
MUST-STYLE06.02.2022 / 16:02:39
WORKBox CRM ver.1.11 → В настройки добавлена возм...
Разработка имиджевых сайтов, разработка фирменного стиля, брендбук