Как сделать так, чтобы моя опция Nav Menu меняла цвет или фон, когда я нажимал на нее, используя 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

Добавьте класс с нужным вам стилем:

.highlighted {
  background-color: blue;
}

И событие click для родительского элемента, который проверяет цель. Вы также можете удалить выделение на других элементах раньше.

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");
  } 
});