@4chets
Начинающий ВЕБ-программист

Почему не стилизуется активный пункт меню?

Есть вот такое меню:
<nav class="menu-main">
	<ul>
		<li class="test__active"><a href="index.html">Новости</a></li>
		<li class="test__active"><a href="#1">Информация</a></li>
	</ul>
</nav>


Пробую подключить js:
(function($){
var $curURL = document.location.href;
$('.test__active').each(function() {
	var $linkHref = $(this).find('a').attr('href');
	if ($curURL.indexOf($linkHref) > -1) {
		$(this).addClass('active');
	}
});

})(jQuery);


Всё отлично, класс добавляется.

Теперь стилизую:
active a{
           color: #2071cc;
        }

Цвет активного пункта не меняется.

5e6fc87728960422928483.png

Если убрать здесь цвет:

nav.menu-main ul li a{
	  font-size: 35px;
	  color: #A0A0A0;
        }

то всё заработает. В чём проблема?
  • Вопрос задан
  • 74 просмотра
Решения вопроса 2
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
Код без Jquery. Ну, а ещё, обращаться к элементам лучше через классы, айди, или дата атрибуты, не используя при этом множественную вложенность.

<nav class="menu-main">
  <ul>
    <li class="test__active"><a class="menu-main__link" href="index.html">Новости</a></li>
    <li class="test__active"><a class="menu-main__link" href="information.html">Информация</a></li>
  </ul>
</nav>


.menu-main__link-active { 
color: #2071cc;
}


const menu = document.querySelector('.menu-main');
const menuLink = document.querySelectorAll('.menu-main__link');
const activeClass = "menu-main__link-active";
		
	menuLink.forEach(el => {
  if (el.pathname === window.location.pathname) {
    el.classList.add(activeClass);
  } else {
    el.classList.remove(activeClass);
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы