📌  相关文章
📜  如果我们单击它,如何使导航栏着色 (1)

📅  最后修改于: 2023-12-03 15:25:00.321000             🧑  作者: Mango

如何给导航栏添加点击后的着色效果

在网页中，导航栏是非常常见的组件，当用户单击链接时，我们希望能够实现导航栏的变色效果，以提示用户当前所处位置。本文将介绍如何通过 CSS 来实现这一效果。

1. 原理

我们知道，在 CSS 中，可以为元素设置伪类，如 :hover、:active 等。当鼠标悬浮或元素被选中时，这些伪类将会生效并且改变元素的样式。因此，我们可以利用 :active 伪类来为被点击的链接添加变色效果。

2. 实现步骤

下面是实现步骤：

2.1 给导航栏链接添加 class 名称

在 HTML 代码中，给导航栏链接添加 class 名称，以便我们可以方便地为它们添加样式。

<nav>
  <ul>
    <li><a class="nav-link" href="#">Home</a></li>
    <li><a class="nav-link" href="#">About Us</a></li>
    <li><a class="nav-link" href="#">Products</a></li>
    <li><a class="nav-link" href="#">Contact Us</a></li>
  </ul>
</nav>
2.2 添加 CSS 样式

接下来，我们可以添加如下的 CSS 样式：

.nav-link:active {
  color: red;
}

这里我们使用 :active 伪类来控制链接在被点击时的样式。在上面的例子中，我们给链接添加了红色字体颜色。

3. 示例代码

完整的代码示例如下：

<body>
  <nav>
    <ul>
      <li><a class="nav-link" href="#">Home</a></li>
      <li><a class="nav-link" href="#">About Us</a></li>
      <li><a class="nav-link" href="#">Products</a></li>
      <li><a class="nav-link" href="#">Contact Us</a></li>
    </ul>
  </nav>
</body>

<style>
  .nav-link:active {
    color: red;
  }
</style>
4. 结论

通过上面的介绍，我们可以看出，添加导航栏点击后的着色效果非常简单。只需要给链接添加 class 名称，然后利用 :active 伪类来控制样式即可。