仅使用 Javascript 单击导航菜单选项时，如何使导航菜单选项更改颜色或背景？

Question

这是我当前使用 JS 创建的导航菜单。

const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];

items.forEach((item, i) => {
  const el = document.createElement("a");
  el.innerText = item;
  el.classList.add("menu-items");
  el.setAttribute("id", `menu-${i + 1}`);
  el.href = `#section${i + 1}`;
  navList.appendChild(el);
});

基本上，当我点击导航菜单时，如何激活它？

我从 w3schools 看到了这个示例，但我没有看到如何使用我使用 JS 创建的当前菜单来实现它。

这是唯一的方法还是有其他方法可以做到这一点？

Answer 1

添加具有您需要的样式的 class ：

.highlighted {
  background-color: blue;
}

以及检查目标的父元素上的单击事件。 您可能还想删除之前其他元素的突出显示。

document.addEventListener("click", function(event) {
  var highlighted = document.querySelector(".menu-items.highlighted");
  if (highlighted) highlighted.classList.remove("highlighted");
  if (event.target.classList.contains('menu-items')) {
    event.target.classList.add("highlighted");
  } 
});