js制作导航栏网站(代码示例)

制作导航栏网站的关键是使用JavaScript来实现交互效果。我们可以利用JavaScript来动态地添加和删除导航栏的选项，以及为选项添加事件处理程序。

我们需要在HTML中创建一个容器，用于包含导航栏的选项。这个容器可以是一个无序列表（ul），每个选项都是一个列表项（li）。我们可以给每个列表项添加一个唯一的ID，以便在JavaScript中引用它们。

<ul id="navBar">
  <li id="home">Home</li>
  <li id="about">About</li>
  <li id="services">Services</li>
  <li id="contact">Contact</li>
</ul>

接下来，我们可以使用JavaScript来为每个选项添加事件处理程序。例如，当用户点击某个选项时，我们可以将其标记为“活动”状态，并在其他选项上删除“活动”状态。

var navItems = document.querySelectorAll("#navBar li");
navItems.forEach(function(item) {
  item.addEventListener("click", function() {
    // 删除所有选项的“活动”状态
    navItems.forEach(function(item) {
      item.classList.remove("active");
    });
    // 将当前选项标记为“活动”状态
    this.classList.add("active");
  });
});

在上面的代码中，我们首先使用`document.querySelectorAll`选择所有的导航栏选项，并将它们存储在`navItems`变量中。然后，我们使用`forEach`方法为每个选项添加点击事件处理程序。

在点击事件处理程序中，我们首先使用`forEach`方法删除所有选项的“活动”状态。然后，我们使用`classList.add`方法将当前选项标记为“活动”状态。

我们可以使用CSS样式来为“活动”状态的选项添加特定的样式，以突出显示当前所在的页面。

#navBar li.active {
  background-color: #333;
  color: #fff;
}

通过以上的步骤，我们就可以使用JavaScript制作一个简单的导航栏网站了。当用户点击不同的选项时，选项会被标记为“活动”状态，并应用相应的样式。这样，用户就可以清楚地知道自己当前所在的页面。