我想在单击导航栏元素时向其添加特定样式

<nav>
  <ul>
    <li id="item1">导航项1</li>
    <li id="item2">导航项2</li>
    <li id="item3">导航项3</li>
  </ul>
</nav>

.nav-item-active {
  background-color: #f0f0f0;
}

// 获取导航栏元素
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

// 添加单击事件监听器
item1.addEventListener("click", function() {
  // 移除所有导航项的特定样式
  item1.classList.add("nav-item-active");
  item2.classList.remove("nav-item-active");
  item3.classList.remove("nav-item-active");
});

item2.addEventListener("click", function() {
  // 移除所有导航项的特定样式
  item1.classList.remove("nav-item-active");
  item2.classList.add("nav-item-active");
  item3.classList.remove("nav-item-active");
});

item3.addEventListener("click", function() {
  // 移除所有导航项的特定样式
  item1.classList.remove("nav-item-active");
  item2.classList.remove("nav-item-active");
  item3.classList.add("nav-item-active");
});