在导航栏中如何在无序列表元素之间切换

<ul>
  <li><a href="page1.html">页面1</a></li>
  <li><a href="page2.html">页面2</a></li>
  <li><a href="page3.html">页面3</a></li>
</ul>

<ul>
  <li id="item1">项目1</li>
  <li id="item2">项目2</li>
  <li id="item3">项目3</li>
</ul>

<script>
  var item1 = document.getElementById("item1");
  var item2 = document.getElementById("item2");
  var item3 = document.getElementById("item3");

  item1.addEventListener("click", function() {
    // 切换到项目1的内容
  });

  item2.addEventListener("click", function() {
    // 切换到项目2的内容
  });

  item3.addEventListener("click", function() {
    // 切换到项目3的内容
  });
</script>

<style>
  .active {
    background-color: #f00;
    color: #fff;
  }
</style>

<ul>
  <li class="active">项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>