[英]Current Active Link with JS ES6
我目前正在嘗試修復我的導航欄,以便當前鏈接將應用一類“活動”。
我已經設法設置了切換,但我真的很難找到有關如何從其他鏈接中清除類的資源。
這里的所有內容似乎都主要集中在 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');
});
}
如果您單擊菜單鏈接並為單擊的鏈接設置 .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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.