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

Question

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

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

Есть первая конструкция:

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

И вторая:

<div class="scrollbar_item-wrapper">
<a class="scrollbar_item scrollbar_item-1 active" id="scrollbar_item-1" ><span>01</span></a>
<a class="scrollbar_item scrollbar_item-2" href="#head2" id="scrollbar_item-2" ><span>02</span></a>
<a class="scrollbar_item scrollbar_item-3" href="#head3" id="scrollbar_item-3" ><span>03</span></a>
<a class="scrollbar_item scrollbar_item-4" href="#head4" id="scrollbar_item-4" ><span>04</span></a>
<a class="scrollbar_item scrollbar_item-5" href="#head5" id="scrollbar_item-5" ><span>05</span></a>
</div>

Требуется сделать так чтобы когда в первой конструкции в первой ссылке пропадал класс active, то и во второй конструкции в ссылке с классом scrollbar_item-1 тоже пропадал active, затем когда во второй ссылке появлялся класс active, то и во второй конструкции во второй ссылке тоже появлялся класс active, и так далее. Только класс active всегда должен быть только у одной из ссылок и там и там. Реализовать данный скрипт пробовал с применением mutationobserver, но до конца не понимаю как это сделать.

javascript

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

Answer 1

▲ 0

Можно реализовать вот так:

const links = document.querySelectorAll('.link'); //Получаем массив элементов со всеми link
const scrollbarItems = document.querySelectorAll('.scrollbar_item'); //Получаем массив элементов со всеми scrollbar_item

links.forEach((link, id) => { //Запускаем функцию для каждой ссылки, в функцию передаём ссылку и её индекс (номер) 

  link.addEventListener('click', function() { //Каждой ссылке назначаем слушатель клика

    const allActive = document.querySelectorAll('.active'); //Если происходит клик, то находим все элементы с классом active

    for (let i = 0; i < allActive.length; i++) { //Удаляем у всех найденных элементов класс active
      allActive[i].classList.remove('active');
    }

    link.classList.add('active'); //Добавляем нажатой ссылке класс
    scrollbarItems[id].classList.add('active'); //Добавляем нужному scrollbar_item класс по id нажатой ссылки
  })
})

.active {
  background: #0f0;
}

<div class="fp-right">
  <ul>
    <li><a href="#head1" class="link active">Ссылка 1</a></li>
    <li><a href="#head2" class="link">Ссылка 2</a></li>
    <li><a href="#head3" class="link">Ссылка 3</a></li>
    <li><a href="#head4" class="link">Ссылка 4</a></li>
    <li><a href="#head5" class="link">Ссылка 5</a></li>
  </ul>
</div>

<div class="scrollbar_item-wrapper">
  <a class="scrollbar_item scrollbar_item-1 active" href="#head1" id="scrollbar_item-1"><span>01</span></a>
  <a class="scrollbar_item scrollbar_item-2" href="#head2" id="scrollbar_item-2"><span>02</span></a>
  <a class="scrollbar_item scrollbar_item-3" href="#head3" id="scrollbar_item-3"><span>03</span></a>
  <a class="scrollbar_item scrollbar_item-4" href="#head4" id="scrollbar_item-4"><span>04</span></a>
  <a class="scrollbar_item scrollbar_item-5" href="#head5" id="scrollbar_item-5"><span>05</span></a>
</div>

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

Ответы