首页如何使用JavaScript为五个按钮设置点击事件，使得点击哪个按钮哪个按钮会发光（高亮显示）？

如何使用JavaScript为五个按钮设置点击事件，使得点击哪个按钮哪个按钮会发光（高亮显示）？

时间: 2024-12-23 22:25:15 浏览: 9

在JavaScript中，你可以通过为每个按钮分别添加点击事件监听器来实现这个功能。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .highlighted { background-color: yellow; /* 高亮颜色 */ } </style> </head> <body> <button id="btn1" class="btn">Button 1</button> <button id="btn2" class="btn">Button 2</button> <button id="btn3" class="btn">Button 3</button> <button id="btn4" class="btn">Button 4</button> <button id="btn5" class="btn">Button 5</button> <script> const buttons = document.querySelectorAll('.btn'); buttons.forEach((button, index) => { button.addEventListener('click', function() { // 移除所有按钮的高亮样式 buttons.forEach(button => button.classList.remove('highlighted')); // 点击当前按钮后给它添加高亮样式 this.classList.add('highlighted'); }); }); </script> </body> </html> ``` 在这个例子中，我们首先获取所有的按钮元素，然后为它们添加点击事件监听器。当某个按钮被点击时，会清除所有按钮的`highlighted`类，只保留当前点击按钮的高亮效果。

阅读全文