js点击当前菜单高亮

<ul id="menu">
  <li class="menu-item">Home</li>
  <li class="menu-item">About</li>
  <li class="menu-item">Services</li>
  <li class="menu-item">Contact</li>
</ul>

.menu-item {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
}

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

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu-item');

  menuItems.forEach(item => {
    item.addEventListener('click', function() {
      // 移除所有菜单项的高亮状态
      menuItems.forEach(el => el.classList.remove('active'));
      // 为当前点击的菜单项添加高亮状态
      this.classList.add('active');
    });
  });
});