如何为导航栏当前元素添加“active”类

const menu = document.querySelector(' nav .container ul');
const navItems = menu.querySelectorAll('li');
navItems.forEach(item => {
  const link = item.querySelector('a');
  ink.addEventListener('click', () => { // 错误：ink 应为 link
    link.classList.add(".active"); // 错误：classList.add 不需要点号
  });
});

const menu = document.querySelector('nav .container ul');
const navLinks = menu.querySelectorAll('a'); // 直接获取所有链接

navLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 1. 移除所有链接的 'active' 类
    navLinks.forEach(otherLink => otherLink.classList.remove('active'));
    // 2. 为当前点击的链接添加 'active' 类
    link.classList.add('active');
  });
});

// 缓存列表元素和所有链接
const navList = document.querySelector('nav .container ul');
const allNavLinks = navList.querySelectorAll('a'); // 仍然需要所有链接来移除 'active' 类

// 为列表元素添加一个事件监听器
navList.addEventListener('click', handleNavLinkClick);

/**
 * 处理导航链接点击事件的函数。
 * @param {Event} e - 点击事件对象。
 */
function handleNavLinkClick(e) {
  // 检查被点击的元素是否是 'a' 标签
  if (e.target.matches('a')) {
    // 阻止默认的链接跳转行为（如果需要，例如单页应用）
    // e.preventDefault(); 

    // 1. 移除所有链接的 'active' 类
    allNavLinks.forEach(link => link.classList.remove('active'));

    // 2. 为当前点击的链接添加 'active' 类
    e.target.classList.add('active');
  }
}

:root {
  --color-white: white;
  --color-primary: #007bff; /* 示例颜色，可根据主题调整 */
}

/* 定义 active 类的样式 */
.active {
  background-color: var(--color-primary); /* 注意使用 background-color 而非 background */
  color: var(--color-white);
  padding: 8px 15px; /* 示例：增加一些内边距 */
  border-radius: 4px; /* 示例：圆角 */
  transition: all 0.3s ease; /* 示例：平滑过渡效果 */
}

/* 确保导航链接在非 active 状态下也有默认样式 */
nav .container ul li a {
  display: block; /* 确保链接占据整个列表项的点击区域 */
  padding: 8px 15px;
  color: #333; /* 默认颜色 */
  text-decoration: none; /* 移除下划线 */
}

/* 鼠标悬停效果 */
nav .container ul li a:hover:not(.active) {
  background-color: #f0f0f0;
}

<nav>
  <div class="container">
    <a href="#">
      <h3> AMANI DEV </h3>
    </a>
    <ul>
      <!-- 初始可以设置一个链接为 active，或者通过 JavaScript 动态设置 -->
      <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>