保持CSS样式在其他按钮点击时仍然保持焦点。 _编程开发

保持CSS样式在其他按钮点击时仍然保持焦点。

创始人

2024-11-21 15:31:23

0次

使用 JavaScript 来切换样式。具体来说，可以添加一个名为“className”的属性来切换类，从而切换样式。以下是一个示例，使用一个名为“active”的类来表示当前焦点：

HTML 代码：

CSS 代码：

.active {
  background-color: red;
  color: white;
}

JavaScript 代码：

let button1 = document.getElementById("button1");
let button2 = document.getElementById("button2");

button1.addEventListener("click", function() {
  button1.classList.add("active");
  button2.classList.remove("active");
});

button2.addEventListener("click", function() {
  button2.classList.add("active");
  button1.classList.remove("active");
});

在这个示例中，当按钮1被点击时，它将被添加“active”类，按钮2将被移除该类，从而使按钮1显示为焦点状态，并显示红色背景和白色文本。当按钮2被点击时，与按钮1相反的操作将执行，从而保持焦点状态始终正确。

上一篇：保持CSS过渡在其结束状态

下一篇：保持存档数据架构与运行数据仓库的最新状态

保持CSS样式在其他按钮点击时仍然保持焦点。

相关内容

热门资讯