js导航栏点击选中状态

<ul class="nav">
  <li><a href="#home" class="nav-link">Home</a></li>
  <li><a href="#about" class="nav-link">About</a></li>
  <li><a href="#services" class="nav-link">Services</a></li>
  <li><a href="#contact" class="nav-link">Contact</a></li>
</ul>

.nav-link {
  color: black;
  text-decoration: none;
}

.nav-link.active {
  color: red;
  font-weight: bold;
}

document.addEventListener('DOMContentLoaded', function() {
  const navLinks = document.querySelectorAll('.nav-link');

  navLinks.forEach(link => {
    link.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止默认行为
      // 移除所有链接的active类
      navLinks.forEach(navLink => navLink.classList.remove('active'));
      // 给当前点击的链接添加active类
      this.classList.add('active');
    });
  });
});