CSS 根据URL添加活动导航类

在本文中，我们将介绍如何使用CSS根据URL添加活动导航类。导航菜单在网站中扮演着非常重要的角色，通过标记活动页面可以提高用户体验和导航的可用性。

阅读更多：CSS 教程

为何需要活动导航类？

当用户在网站中浏览不同页面时，他们通常会打开不同的链接。为了帮助用户了解他们当前所在的页面，我们可以通过在导航菜单中突出显示活动页面的链接来提供导航反馈。这就是为什么我们需要一个活动导航类。

CSS类选择器

在CSS中，我们可以使用类选择器来选择具有相同类名的元素。在我们的案例中，我们需要一个活动导航类名，例如”active”。我们可以使用类选择器来选择具有该类名的元素，并将其样式化以突出显示活动页面。

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

在上面的示例代码中，我们定义了一个名为”active”的类，它具有红色的背景颜色和白色的文字颜色。

使用JavaScript添加活动导航类

使用CSS，我们无法直接根据当前URL为导航菜单添加活动导航类。为了实现这一点，我们可以结合使用JavaScript和CSS来实现。

以下是一个示例代码，演示了如何使用JavaScript为当前URL添加活动导航类：

<!DOCTYPE html>
<html>
<head>
  <style>
    .active {
      background-color: #f00;
      color: #fff;
    }
  </style>
  <script>
    function setActiveClass() {
      var path = window.location.pathname;
      var links = document.querySelectorAll('nav a');
      for (var i = 0; i < links.length; i++) {
        if (links[i].getAttribute('href') === path) {
          links[i].classList.add('active');
        }
      }
    }
    window.onload = setActiveClass;
  </script>
</head>
<body>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
    <a href="/contact">联系</a>
  </nav>
</body>
</html>