同时更改两组不同导航链接的活动状态

<ul>
  <li><a href="#" id="nav1">导航链接1</a></li>
  <li><a href="#" id="nav2">导航链接2</a></li>
</ul>

<ul>
  <li><a href="#" id="nav3">导航链接3</a></li>
  <li><a href="#" id="nav4">导航链接4</a></li>
</ul>

// 获取导航链接的DOM元素
var nav1 = document.getElementById("nav1");
var nav2 = document.getElementById("nav2");
var nav3 = document.getElementById("nav3");
var nav4 = document.getElementById("nav4");

// 添加事件监听器
nav1.addEventListener("click", toggleActiveState);
nav2.addEventListener("click", toggleActiveState);
nav3.addEventListener("click", toggleActiveState);
nav4.addEventListener("click", toggleActiveState);

function toggleActiveState(event) {
  // 阻止默认的链接跳转行为
  event.preventDefault();

  // 移除所有导航链接的活动状态
  nav1.classList.remove("active");
  nav2.classList.remove("active");
  nav3.classList.remove("active");
  nav4.classList.remove("active");

  // 添加当前点击的导航链接的活动状态
  event.target.classList.add("active");
}

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