我目前正在尝试修复导航栏,以便当前链接将被应用为“活动”类。
我设法设置了切换开关,但是我真的很努力寻找有关如何清除其他链接上的类的资源。
这里的所有内容似乎都主要集中在我有意避免的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');
});
}