HTML 如何在点击按钮后保持 :active 的 CSS 样式

在本文中，我们将介绍如何在点击按钮后保持活动状态(:active)的 CSS 样式。

阅读更多：HTML 教程

什么是 :active 伪类

在 HTML 中，:active 是一个用于表示激活状态的伪类。它指示用户正在操作元素（例如，鼠标按下按钮）时的样式。一旦操作完成，激活状态就会消失。

问题描述

当我们点击按钮时，按钮会响应并处于 :active 状态。但是，一旦我们释放鼠标按钮并完成操作，按钮的 :active 状态就会消失，恢复到默认样式。有时，我们希望按钮保持激活状态，以便用户知道他们刚刚完成了某个操作。

解决方法

为了在按钮点击后保持 :active 的 CSS 样式，我们可以利用 JavaScript 来实现。具体步骤如下：

首先，为 HTML 中的按钮元素添加一个唯一的 id。例如：

<button id="myButton">点击我</button>

然后，创建一个 JavaScript 函数，通过修改按钮的类名(class)来实现保持活动状态。示例如下：

function keepActiveStyle() {
  var button = document.getElementById("myButton");
  button.classList.add("active");
}

接下来，在 CSS 样式表中定义.active 类的样式。例如：

button.active {
  /* 按钮的激活状态样式 */
  background-color: red;
}

最后，将 JavaScript 函数与按钮的点击事件关联起来。示例如下：

var button = document.getElementById("myButton");
button.addEventListener("mousedown", keepActiveStyle);

现在，当用户点击按钮时，按钮将保持 :active 的样式，即使释放鼠标按钮，激活状态依然存在。

示范代码

以下是一个完整的示例代码，演示了如何在点击按钮后保持 :active 的 CSS 样式：

<!DOCTYPE html>
<html>
<head>
<style>
button.active {
  /* 按钮的激活状态样式 */
  background-color: red;
}
</style>
</head>
<body>

<button id="myButton">点击我</button>

<script>
function keepActiveStyle() {
  var button = document.getElementById("myButton");
  button.classList.add("active");
}

var button = document.getElementById("myButton");
button.addEventListener("mousedown", keepActiveStyle);
</script>

</body>
</html>

在上述示例代码中，当你点击按钮时，按钮将一直保持红色的背景色。