При клике на ссылку к ней добавляется класс, а у других ссылок удаляется

Question

JS

'use strict'

let prof = document.getElementById('profMenu').childElementCount;
let el = document.getElementsByClassName('menu__link');



document.onclick = function(event) {
    for (let i = 0; i < prof; i++) {
        if (document.querySelector('.menu__link').contains('menu__link-active')) {
            el[i].classList.remove('menu__link-active');
        }
    }
    event.target.classList.add('menu__link-active');
}

HTML

<ul class="menu" id = 'profMenu'>
            <li class="menu__item">
                <a href="#" class="menu__link pr menu__link-active">
                    All
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Modeling
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Acting
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link  pr">
                    Corporate
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Business
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Professional
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Group
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Company
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Officer
                </a>
            </li>
        </ul>

При клике к выбранному элементу добавляется класс 'menu__link-active', а у других должен удалятся. При моем решении удаляется класс только при первом клике, если после кликнуть снова, то у прошлого тега класс остается.

Answer 1

В JS ошибка.

document.querySelector('.menu__link').contains('menu__link-active')

Возможно, вы пропустили classList

document.querySelector('.menu__link').classList.contains('menu__link-active')

Но там не нужно проверять это условие.

Правильно будет вот так:

document.onclick = function(event) {
    for (let i = 0; i < prof; i++) {
            el[i].classList.remove('menu__link-active');
    }
    event.target.classList.add('menu__link-active');
}

В какой-то степени оптимальнее будет даже так:

[...document.querySelectorAll('menu__link')].map(
   el => el.addEventListener('click', event => {
      const active = document.querySelector('.menu__link.menu__link-active');
      if(active) {
         active.classList.remove('menu__link-active');
      }
      event.target.classList.add('menu__link-active');
   })
 );

БЛОГ НА HUSL

При клике на ссылку к ней добавляется класс, а у других ссылок удаляется

Ответы (1 шт):