Как сделать чтобы js динамически подставлял класс active к элементу?

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

Есть следующий код в html:


<div class="fp=right">
        <ul>
            <li><a href="#head1"></a></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>

Есть следующий код в js:


const link = document.querySelector('.fp-right a[href="#head1"]');

if(link.classList.contains('active')){

var li = link.parentElement;

li.classList.add('active');

}else{
  li.classList.remove('active');
};

Этот код проверяет есть ли у элемента с классом "fp-right" дочерний элемент ссылка с атрибутом href="#head1" и если он активен (имеет класс "active"), то добавляет класс "active" родительскому элементу этой ссылки (li). В противном случае, если ссылка не активна, класс "active" удаляется у родительского элемента.

Только вся проблема заключается в том, что если класс active ВТОРОЙ раз добавляется ссылке, то он уже не будет появляться у родителя (li), как сделать чтобы класс active динамически подставлялся родителю и пропадал когда его нет?

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

Ответы

▲ 0

Ваш код выполняется один раз и все. Если вам нужно каждый раз проверять во время скролла, то нужно поместить его внутрь обработки события скролл. И еще, зачем вам там var? Лучше заменить на const.

document.addEventListener("scroll", (event) => {
const link = document.querySelector('.fp-right a[href="#head1"]');

if(link.classList.contains('active')) {

  const li = link.parentElement;

  li.classList.add('active');

} else {
  li.classList.remove('active');
};
}

В данном случае, я сделал обработчик события scroll на весь документ. То есть при скролле страницы будет запускаться ваш код.