js导航菜单设置当前频道高亮导航条

<nav>
  <ul>
    <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>

.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');

  // 遍历每个链接，检查当前URL的hash值
  navLinks.forEach(link => {
    if (link.getAttribute('href') === window.location.hash) {
      link.classList.add('active'); // 添加高亮类
    }
  });
});