前端网页导航栏实现点击后变色

您好，要实现前端网页导航栏点击后变色，可以通过以下步骤实现：

1. 给导航栏菜单添加一个点击事件监听器
2. 在点击事件处理函数中，获取当前被点击的菜单元素，并为其添加一个指定的 CSS 类名，比如 active
3. 在 CSS 样式表中，定义 active 类的样式，设置菜单元素的背景色等属性

下面是一个简单的示例代码：

HTML：

<nav>
  <ul>
    <li><a href="#" class="menu-item">Home</a></li>
    <li><a href="#" class="menu-item">About</a></li>
    <li><a href="#" class="menu-item">Contact</a></li>
  </ul>
</nav>

CSS：

.menu-item {
  color: #000;
}

.menu-item.active {
  background-color: #f00;
  color: #fff;
}

JavaScript：

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  item.addEventListener('click', e => {
    e.preventDefault();
    menuItems.forEach(item => item.classList.remove('active'));
    e.target.classList.add('active');
  });
});

上面的代码中，我们首先使用 querySelectorAll 获取所有的菜单元素，然后为每个菜单元素添加一个点击事件监听器。在点击事件处理函数中，我们使用 e.target 获取当前被点击的菜单元素，并为其添加 active 类。同时，我们还移除了其它菜单元素的 active 类，保证只有一个菜单元素被选中时才会显示为 active 样式。