反应链接下划线 - JavaScript

在编写 Web 应用程序时，您可能需要在用户单击链接时执行某些操作。您可以使用 JavaScript 中的事件处理程序在用户单击链接时添加行为。但是，链接的标准样式在多数浏览器中看起来都很好。

这就是反应链接下划线的作用。它可以为用户提供视觉反馈，在单击链接时添加下划线，并在对链接执行操作后将其删除。本文将介绍如何使用 JavaScript 和 CSS 实现反应链接下划线。

HTML 基础

首先，我们需要一个链接来添加下划线。

<a href="#">Click me</a>

这是一个标准的 HTML 链接，它的 href 属性设置为 #，以防止页面重新加载。

CSS 样式

我们需要一些 CSS 样式来控制链接的样式和下划线。

a {
  text-decoration: none;
  color: blue;
  position: relative;
}

a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: blue;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

在这个样式中，我们将链接的 text-decoration 属性设置为“none”，以便在用户单击链接时不会添加下划线。我们还为链接设置了 position: relative，以便我们之后可以将其 ::before 伪元素绝对定位在链接的底部。我们还设置了颜色为蓝色。

接下来，我们定义一个名为 ::before 的伪元素，在其上定义下划线。具体来说，我们将 content 设置为空，以便仅使用元素样式，通过 position: absolute 定位在链接底部。我们还将高度设置为 1 像素，底部设置为 0，左侧设置为 0，宽度设置为 100%。我们还将可见性设置为 hidden，以便在鼠标指针悬停在链接上时隐藏下划线。最后，我们定义了一个过渡时间为 0.3 秒的过渡效果。

现在，当用户悬停在链接上时，我们添加了下划线。但当他们单击链接时，下划线不会脱落。我们需要一些 JavaScript 来解决这个问题。

JavaScript 代码

document.querySelectorAll("a").forEach((a) => {
  a.addEventListener("click", function (e) {
    e.preventDefault();
    this.classList.add("clicked");
    setTimeout(() => {
      this.classList.remove("clicked");
    }, 300);
  });
});

在这个 JavaScript 中，我们查询所有链接，然后为每个链接添加一个单击事件侦听器。在单击事件中，我们使用 preventDefault() 防止浏览器重新加载页面。然后我们为链接添加一个“clicked”类。当该类应用于链接时，我们将移除链接底部的下划线。为了在一段时间后重新添加下划线，我们设置了一个计时器并为其指定 300 毫秒的时间。在该时间后，我们从链接中删除“clicked”类，从而重新添加下划线。

结论

现在，您已经了解了如何使用 JavaScript 和 CSS 快速实现反应链接下划线。只需将上面的 HTML、CSS 和 JavaScript 代码复制并粘贴到您的项目中即可。