点击时如何在锚点标签上添加活动类？

<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.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(); // 阻止默认行为
      // 移除所有链接的活动类
      navLinks.forEach(link => link.classList.remove('active'));
      // 为当前点击的链接添加活动类
      this.classList.add('active');
    });
  });
});