下面是一个使用HTML、CSS和JavaScript的示例,可以实现按钮颜色同时显示的效果:
HTML代码:
CSS代码:
button {
width: 100px;
height: 50px;
margin: 10px;
}
.active {
background-color: red;
}
JavaScript代码:
var buttons = document.querySelectorAll('button');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
buttons.forEach(function(button) {
button.classList.toggle('active');
});
});
});
这段代码首先通过document.querySelectorAll('button')
选择所有的按钮,并将它们存储在一个变量buttons
中。
然后,使用forEach
方法为每个按钮添加一个点击事件监听器。当按钮被点击时,forEach
方法遍历所有的按钮,并使用classList.toggle
方法在按钮的类列表中切换active
类。这样,当一个按钮被点击时,它将添加或删除active
类,从而改变按钮的颜色。
通过这种方式,无论点击哪个按钮,所有的按钮都会同时显示按钮颜色。
上一篇:按钮颜色及周围边距问题