Выделяем активный пункт меню на jQuery
На различных CMS есть стандартные инструменты (настройки, плагины), и с их помощью можно реализовать подсветку пункта в меню, в котором находится пользователь.
Но данный функционал есть не у каждого, особенно если сайт статичный. Одно могу сказать точно – если вы еще не реализовали это на своем сайте, то уделите немного времени и устраните пробелы в юзабилити, ведь такая функция помогает пользователю сориентироваться на вашем сайте.
Для решения задачи, как вы поняли, мы используем jQuery, и реализация будет выглядеть следующим образом.
Предположим, что у нас имеется такое меню:
<ul class="navigation">
<li><a href="/main">Главная</a></li>
<li><a href="/about_us">О нас</a></li>
<li><a href="/about_us/team">Команда</a></li>
</ul>Что нам необходимо сделать? Сверить текущий URL с URL, указанными в меню, и в случае совпадения присвоить класс соответствующему пункту.
Готовый скрипт для данного примера будет выглядеть следующим образом:
<script>
$(function() {
var pathname_url = window.location.pathname;
var href_url = window.location.href;
$(".navigation li").each(function () {
var link = $(this).find("a").attr("href");
if(pathname_url == link || href_url == link) {
$(this).addClass("active");
}
});
});
</script>«active» здесь – класс активного пункта меню. Далее, применяя стили, выделяете активный пункт, например, с помощью цвета:
.navigation li.active a {
color: green;
}По аналогии скрипт можно переделать под любую другую структуру меню. Если у вас возникают с этим проблемы – пишите в комментариях, постараюсь помочь.
