Как задать стили определённому элементу при добавлении класса active к другому элементу?

Рейтинг: 0Ответов: 1Опубликовано: 19.07.2023

Имеется следующая html структура:

<div class="fp=right">
        <ul>
            <li><a href="#head1" class="active"></a></li> // задать стили именно для li
            <li><a href="#head2"></a></li>
            <li><a href="#head3"></a></li>
            <li><a href="#head4"></a></li>
            <li><a href="#head5"></a></li>
        </ul>

    </div>

Нужно задать стили для первого элемента li, когда у ссылки внутри него появляется класс active

css
Источник: Stack Overflow на русском

Ответы

▲ 1

С помощью JS можно добавить класс со стилями для <li>. Для обращения к родителю элемента необходимо использовать parentNode. В демо-примере при клике на ссылку, ей добавляется класс active, а также её родителю класс li-active. Но если необходимо проанализировать элементы на наличие класса и после добавить стили родителю, то сделать это можно при помощи closest вот так:

const link = document.querySelectorAll('.link');

link.forEach((element) => {
  if (element.closest(".active")) {
    element.parentNode.classList.add("li-active");
  }
})

Демо:

const link = document.querySelectorAll('.link');

link.forEach((element) => {
  element.addEventListener('click', function () {
    element.classList.add("active");
    element.parentNode.classList.add("li-active");
  });
})
.active {
  background: green;
}

.li-active {
  background: blue;
}
<ul>
  <li><a class="link" href="#">Ссылка</a></li>
  <li><a class="link" href="#">Ссылка</a></li>
  <li><a class="link" href="#">Ссылка</a></li>
  <li><a class="link" href="#">Ссылка</a></li>
  <li><a class="link" href="#">Ссылка</a></li>
</ul>