<div class="layui-btn-group"> <button type="button" class="layui-btn">横排</button> <button type="button" class="layui-btn">竖排</button> </div> 点击哪一个哪一个加背景色 其余去掉
时间: 2023-10-06 07:09:16 浏览: 143
您可以使用以下的 JavaScript 代码实现该功能:
```javascript
<script>
// 获取按钮组
var btnGroup = document.querySelector(".layui-btn-group");
// 获取按钮列表
var btnList = btnGroup.querySelectorAll(".layui-btn");
// 给每个按钮添加点击事件
btnList.forEach(function(btn) {
btn.addEventListener("click", function() {
// 先将所有按钮的背景色去掉
btnList.forEach(function(b) {
b.classList.remove("active");
});
// 给当前点击的按钮加上背景色
this.classList.add("active");
});
});
</script>
```
同时,需要在 CSS 中添加 `.active` 类的样式,例如:
```css
.layui-btn.active {
background-color: #009688;
color: #fff;
}
```
这样,当用户点击按钮时,只有当前点击的按钮会有背景色,其余按钮的背景色会被去掉。
阅读全文
相关推荐















