Текущая активная связь с JS ES6

Question

Я сейчас пытаюсь исправить панель навигации, чтобы к текущей ссылке был применен класс 'active'.

Мне удалось настроить переключатель, но я действительно изо всех сил пытаюсь найти ресурсы о том, как очистить класс от других ссылок.

Здесь все, по-видимому, в первую очередь сосредоточено на JQuery, которого я намеренно стараюсь избегать.

Вот мой код:

<div class="navbar">
        <a href="#" class="toggle" id="nav-hamburger">
            <i class="fas fa-bars"></i>
            <a href="#" class="brand">Appeal Digital</a>
        </a>
        <div class="links">
                <a href="#" class="link active">Home</a>
                <a href="#" class="link">Who are we?</a>
                <a href="#" class="link">Meet the Team</a>
                <a href="#" class="link">Contact Us</a>
        </div> 
    </div>


const toggleBtn = document.querySelector('#nav-hamburger');
toggleBtn.addEventListener('click', (el) => {

    //TOGGLE NAV BUTTON
    const links = document.querySelector('.links');
    links.classList.toggle('links-show');
});

const links = document.getElementsByClassName('link');

for(let el of links) {

    el.addEventListener('click', (e) => {
        el.classList.remove('active');
        el.classList.toggle('active');    

    });
}

Answer 1

Я бы удалил все .active классы, если вы нажмете на ссылку меню и установите .active класс для нажатой ссылки.

const links = document.querySelectorAll('.links > a');

const changeActive = (e) => {
  [...links].forEach(link => link.classList.remove('active'));
  e.target.classList.add('active');
}

[...links].forEach(e => e.addEventListener('click', changeActive));

.active {
  font-weight: bold;
}

<div class="navbar">
  <a href="#" class="toggle" id="nav-hamburger">
    <i class="fas fa-bars"></i>
    <a href="#" class="brand">Appeal Digital</a>
  </a>
  <div class="links">
    <a href="#" class="link active">Home</a>
    <a href="#" class="link">Who are we?</a>
    <a href="#" class="link">Meet the Team</a>
    <a href="#" class="link">Contact Us</a>
  </div>
</div>