如何在不使用任何框架的情况下响应菜单栏

<ul>
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

ul {
  display: flex;
  justify-content: space-around;
  background-color: #f1f1f1;
  padding: 10px;
}

li {
  list-style-type: none;
  padding: 5px;
  cursor: pointer;
}

li:hover {
  background-color: #ddd;
}

const menuItems = document.querySelectorAll('li');

menuItems.forEach(function(menuItem) {
  menuItem.addEventListener('click', function() {
    // 根据需求执行相应的操作，例如显示对应的内容或切换菜单项的样式
  });
});