如何將活動 Class 添加到當前導航欄元素？

Question

希望你們都做得很好。 當用戶使用本教程位於頁面的特定部分時，我一直在嘗試將（活動 class ）添加到每個導航欄鏈接（我被困在 2:45:05）並且到目前為止沒有成功任何人都告訴我我做錯了什么。謝謝。

 const menu = document.querySelector(' nav.container ul'); const navItems = menu.querySelectorAll('li'); navItems.forEach(item => { const link = item.querySelector('a'); ink.addEventListener('click', () => { link.classList.add(".active"); }); });

 nav.container ul li a.active { background: var(--color-primary); color: var(--color-white); }

 <nav> <div class="container"> <a href="#"> <h3> AMANI DEV </h3> </a> <ul> <li><a href="#home" class="active">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#services">Services</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#contact">Contact Me</a> </li> </ul> </div> </nav>

Answer 1

1. 用ink打錯沒有link 。
2. 當您使用classList分配 class 時，您不包括. : classList.add('active') 。
3. 在您的 CSS 中， background可能應該是background-color 。
4. 如果您想在應用新鏈接之前刪除其他活動鏈接，您可以使用forEach迭代鏈接並在每個鏈接上使用classList.remove('active') 。

您可能會發現事件委托更易於管理。 與其將多個偵聽器附加到多個元素，不如將一個偵聽器附加到列表元素，以監視來自其子元素的事件，因為它們“使 DOM 冒泡。然后您可以檢查單擊的元素是否是一個鏈接，從上一個鏈接，然后將活動的 class 應用於單擊的鏈接。

這是使用事件委托的示例。

 // Cache the list, and the items const list = document.querySelector(' nav.container ul'); const links = list.querySelectorAll('a'); // Add one listener to the list element list.addEventListener('click', handleClick); // If the clicked element is a link remove all // the active classes from the other links, and then // add the active class to the link that was clicked on function handleClick(e) { if (e.target.matches('a')) { links.forEach(link => link.classList.remove('active')); e.target.classList.add('active'); } }

 :root { --color-white: white; --color-primary: red; }.active { background-color: var(--color-primary); color: var(--color-white); }

 <nav> <div class="container"> <a href="#"> <h3> AMANI DEV </h3> </a> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#services">Services</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#contact">Contact Me</a> </li> </ul> </div> </nav>

Answer 2

您需要在不在li標簽上的標簽中執行querySelectorAll 。 只需這樣做並讓我知道。

Answer 3

document.querySelectorAll('ul li').forEach(el => {
  el.onclick = () => {
    document.querySelectorAll('ul li').forEach(el => el.classList.remove('active'));
    el.classList.add('active');
  }
})

這里有一個演示代碼：

 document.querySelectorAll('#myNav li').forEach(el => { el.onclick = () => { document.querySelectorAll('#myNav li').forEach(el => el.classList.remove('active')); el.classList.add('active'); } })

 .active { font-size: 70px; }

 <nav> <div class="container"> <a href="#"> <h3> AMANI DEV </h3> </a> <ul id="myNav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#services">Services</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#contact">Contact Me</a> </li> </ul> </div> </nav>

Answer 4

修改以下行中的代碼：

 ink.addEventListener('click',() => {

至

 link.addEventListener('click',() => {

變成這樣

const menu = document.querySelector(' nav .container ul');

const navItems = menu.querySelectorAll('li');
navItems.forEach(item => {
  const link = item.querySelector('a');
  link.addEventListener('click',() => {
    link.classList.add(".active");
  });
}); 

Answer 5

 // selecting all a element on the page const links = document.querySelectorAll('a'); // adding a click event on all elements links.forEach((link) => { link.addEventListener('click', (e) => { // if we click first thing is deleting the active class from all link links.forEach((link) => { link.classList.remove('active') }) // then in the end add the active class only in the correct one e.target.classList.add('active') }) })