element按钮组怎么实现点击了后 一直高亮
时间: 2023-08-09 21:02:39 浏览: 56
要实现element按钮组点击后一直高亮,可以通过CSS样式和JavaScript来实现。
首先,在HTML中给按钮组添加一个共同的class,例如"btn-group"。
然后,使用CSS样式给该class添加一个高亮的背景色和颜色,例如:
```
.btn-group button {
background-color: yellow;
color: black;
}
```
这样按钮点击时就会出现高亮的效果。
接下来,使用JavaScript监听按钮点击事件,并将被点击的按钮添加一个高亮的类名。可以通过遍历按钮组的所有按钮,并为每个按钮添加点击事件监听器。
```javascript
var buttons = document.getElementsByClassName("btn-group")[0].getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
this.classList.add("active");
});
}
```
需要注意的是,在CSS中为高亮的按钮定义一个额外的类名,例如"active",并在"btn-group button"类中添加active类的样式。
```
.btn-group button.active {
// 高亮时的样式
}
```
这样当点击按钮时,会触发事件监听器,为被点击的按钮添加active类名,从而实现按钮的持续高亮效果。
以上就是用CSS和JavaScript实现element按钮组点击后一直高亮的方法。