如何实现html点击当前按钮改变颜色保持不变,点击下一个按钮上一个按钮还原之前颜色
时间: 2023-07-20 18:43:40 浏览: 91
你可以使用JavaScript来实现这个功能。具体的实现过程如下:
1. 给每个按钮添加一个 `onclick` 事件,当点击按钮时触发事件。
2. 在事件处理函数中,将当前按钮的颜色修改为你想要的颜色,同时记录下当前按钮的标识符(比如id或者索引值)。
3. 在下一个按钮被点击时,先将上一个按钮的颜色还原为原来的颜色,然后再将当前按钮的颜色修改为目标颜色,并更新记录的标识符。
下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>按钮颜色切换</title>
<style>
.active {
background-color: red;
color: white;
}
</style>
</head>
<body>
<button id="btn1" onclick="changeColor('btn1')">按钮1</button>
<button id="btn2" onclick="changeColor('btn2')">按钮2</button>
<button id="btn3" onclick="changeColor('btn3')">按钮3</button>
<script>
var lastBtnId = null; // 记录上一个按钮的id
function changeColor(id) {
var currentBtn = document.getElementById(id);
currentBtn.classList.add('active'); // 设置当前按钮的颜色
if (lastBtnId && lastBtnId !== id) { // 如果上一个按钮存在且不是当前按钮
var lastBtn = document.getElementById(lastBtnId);
lastBtn.classList.remove('active'); // 还原上一个按钮的颜色
}
lastBtnId = id; // 记录当前按钮的id
}
</script>
</body>
</html>
```
在这个示例中,我们给每个按钮添加了 `onclick` 事件,并在事件处理函数中调用了 `changeColor` 函数。在 `changeColor` 函数中,我们使用 `classList` 属性来修改按钮的样式,并使用 `lastBtnId` 变量来记录上一个按钮的标识符。当下一个按钮被点击时,我们先还原上一个按钮的颜色,然后再修改当前按钮的颜色,并更新 `lastBtnId` 变量。