如何在菜单切换时更改导航栏样式单击

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

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.navbar li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.navbar li.active {
  background-color: #ccc;
}

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

// 添加点击事件监听器
menu1.addEventListener("click", function() {
  setActiveMenu(menu1);
});

menu2.addEventListener("click", function() {
  setActiveMenu(menu2);
});

menu3.addEventListener("click", function() {
  setActiveMenu(menu3);
});

// 设置活动菜单项
function setActiveMenu(activeMenu) {
  // 移除所有菜单项的活动类名
  menu1.classList.remove("active");
  menu2.classList.remove("active");
  menu3.classList.remove("active");

  // 添加活动类名到当前菜单项
  activeMenu.classList.add("active");
}