如何使用javascript保持菜单项在html中处于选中状态

<ul>
  <li id="menu1">菜单项1</li>
  <li id="menu2">菜单项2</li>
  <li id="menu3">菜单项3</li>
</ul>

// 获取菜单项的引用
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var menu3 = document.getElementById("menu3");

// 添加事件监听器
menu1.addEventListener("click", function() {
  // 移除其他菜单项的选中状态
  menu2.classList.remove("active");
  menu3.classList.remove("active");
  
  // 添加当前菜单项的选中状态
  menu1.classList.add("active");
});

menu2.addEventListener("click", function() {
  // 移除其他菜单项的选中状态
  menu1.classList.remove("active");
  menu3.classList.remove("active");
  
  // 添加当前菜单项的选中状态
  menu2.classList.add("active");
});

menu3.addEventListener("click", function() {
  // 移除其他菜单项的选中状态
  menu1.classList.remove("active");
  menu2.classList.remove("active");
  
  // 添加当前菜单项的选中状态
  menu3.classList.add("active");
});

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