Как выделить активный пункт меню css
Перейти к содержимому

Как выделить активный пункт меню css

  • автор:

Курсы javascript

Нужна помощь!
Необходимо выделить активный пункт меню и его последний родительский пункт меню.

Например: перейдя по ссылке «страница 1», нужно добавить класс active активному пункту меню «страница 1» и его последнему родительскому пункт меню «подкатегория 1».

 
категория 1 подкатегория 1 страница 1

Есть вот такой код, но он добавляет класс active всем родительским пунктам меню.

$(function () < var location = window.location.href; $('.menu span').each(function () < var link = $(this).find('a').attr('href'); if (location.indexOf(link) !== -1) < $(this).addClass('active'); >>); >);

Активный пункт меню при помощи кода

Код позволяет вручную задать активный пункт меню. С его помощью можно сделать несколько пунктов активными. Чтобы код работал правильно, создайте в меню пункт с адресом, например, /page, и замените в коде /link на /page (или на ту ссылку, котороя задана у вас).

 script> $(document).ready(function( ) < $('a[href="/link"]').addClass('t-active').css('font-weight','700'); >); script>

Как сделать выделение активного пункта меню?

e8bbecc20ad2404fa736ca0af866b6bf.png

Имеется вот такое меню. Сделал уже состояние при hover’е, теперь необходимо сделать чтобы такое состояние оставалось при нахождении на странице этого пункта меню. Как это сделать?

  • Вопрос задан более трёх лет назад
  • 3747 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 4

passshift

php, js, html5, css

Тут вопрос в том каким образом подгружается контент. Если загрузка содержимого страницы происходит без перезагрузки страницы (динамически, например через ajax), то можно просто менять фон у кнопки, или вешать на неё дополнительный класс вроде:

.activeButton < background-color: yellow;

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

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Выделение текущего пункта меню на CSS

Начал делать меню на сайте, и столкнулся с проблемой, не могу понять, как посредством CSS можно выделить категорию меню в которой я сейчас нахожусь, к примеру, есть такой код меню:

.h-nav .h-nav li .h-nav a .h-nav a:hover, .h-nav a.is-active

Получается, что когда пользователь на главной, надпись в меню "Главная" выделена синим цветом, остальные пункты меняют цвет только при наведении курсором, вопрос состоит в том, как сделать, чтоб при переходе в другую категорию она становилась активной(выделялась синим) в то время как "главная" приобретала свой первостепенный вид? Я просмотрел кучу информации по этому поводу, и все предлагают реализацию посредством JS, что мне не подходит, существует ли решение на CSS?

Добавить комментарий

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