在用户单击导航链接之前，如何将导航栏项目默认设置为活动状态？

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

.active {
  background-color: #f00; /* 设置活动状态的背景颜色 */
  color: #fff; /* 设置活动状态的文字颜色 */
}

// 使用纯JavaScript的示例
document.getElementById("home").addEventListener("click", function() {
  setActive("home");
});

document.getElementById("about").addEventListener("click", function() {
  setActive("about");
});

document.getElementById("contact").addEventListener("click", function() {
  setActive("contact");
});

function setActive(activeId) {
  var navItems = document.querySelectorAll("nav ul li");
  navItems.forEach(function(item) {
    item.classList.remove("active");
  });
  document.getElementById(activeId).classList.add("active");
}