• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как выделить активный пункт меню в jQuery (Выделите пункт активного меню с помощью скрипта jQuery)
Как выделить активный пункт меню в jQuery
Kosten
Дата: Пятница, 2019-09-13, 22:38 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25228
Награды: 57


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

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



В этой статье представлен легкий скрипт jQuery, который будет анализировать ссылки на странице и назначать класс тем, которые указывают на URL текущего документа. Нам нужно стилизовать выделенный класс ссылок с помощью CSS.

Скрипт для выделения пункта меню

Мы можем поместить скрипт в функцию document.ready, которая будет выполняться после завершения загрузки страницы: $ (document) .ready (function () {…});

Код
$("a").each(function() {
    if ((window.location.pathname.indexOf($(this).attr('href'))) > -1) {
        $(this).addClass('activeMenuItem');
    }
});

Скрипт анализирует каждый тег привязки на странице и, если ссылка на текущую страницу содержит атрибут href ссылки, добавляет к ней класс activeMenuItem.

Мы можем дополнительно улучшить наш код:

Код
$(".sidebar a").each(function() {
    //console.log($(this).attr('href'));
    if ((window.location.pathname.indexOf($(this).attr('href'))) > -1) {
        $(this).parent().addClass('activeMenuItem');
    }
});

Второй пример, это анализ ссылок только внутри контейнера .sidebar и он добавляет класс не к ссылке, а к ее родителю, который обычно является тегом li. За комментированная строка console.log может помочь нам отладить наш код, чтобы проверить, какие ссылки анализируются на странице.

CSS

Код
a.activeMenuItem {
    background-color: #F00;
    font-weight: bold;
}

Очевидно исправите этот пример, здесь нужно обратить внимание, что стилизация необходима, чтобы выделить выделенную ссылку. Обычно корректировки цвета помогают выделить его.
Прикрепления: 3077998.png(34.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как выделить активный пункт меню в jQuery (Выделите пункт активного меню с помощью скрипта jQuery)
  • Страница 1 из 1
  • 1
Поиск: