如何将活动类添加到当前导航栏元素

1. 用ink而不是link打字
2. 当用classList分配类时，不包括.:classList.add('active')
3. 在您的CSS中，background可能应该是background-color
4. 如果您想在应用新链接之前删除其他活动链接，可以使用forEach迭代链接，并在每个链接上使用classList.remove('active')

您可能会发现事件委派更易于管理。与其将多个监听器附加到多个元素，不如将一个监听器附加到列表元素；弹出DOM。然后，您可以检查单击的元素是否为链接，从以前的链接中删除活动类，然后将活动类应用于单击的链接。

下面是一个使用事件委派的示例。

// 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>

您需要在标签中执行querySelectorAll，而不是在li标签上。只要这样做，一定要告诉我。

修改以下行中的代码：

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");
});
}); 

// 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')
})
})