js怎么做导航条

<nav id="navbar">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

#navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}

#navbar ul li {
  margin-right: 10px;
}

#navbar ul li a {
  text-decoration: none;
  color: black;
}

#navbar ul li.active a {
  color: red; /* 或者其他你想要的高亮颜色 */
}

document.addEventListener('DOMContentLoaded', function() {
  const navbarLinks = document.querySelectorAll('#navbar ul li a');

  navbarLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认的跳转行为

      // 移除所有链接的激活状态
      navbarLinks.forEach(navLink => navLink.parentElement.classList.remove('active'));

      // 给当前点击的链接添加激活状态
      this.parentElement.classList.add('active');

      // 可以在这里添加页面滚动或其他逻辑
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动到目标元素
      }
    });
  });
});