如何用button使得所有其他按钮回到初始状态
时间: 2024-02-13 09:06:48 浏览: 11
可以通过编写JavaScript代码来实现该功能。首先,给每个按钮设置一个共同的类名,例如“btn”,然后通过querySelectorAll方法选择所有拥有该类名的按钮。接着,使用forEach方法遍历每个按钮,并为每个按钮添加一个点击事件监听器。在每个点击事件监听器中,使用querySelectorAll方法选择所有拥有“btn”类名的按钮,并使用forEach方法遍历它们。在遍历过程中,将每个按钮的class属性设置为“btn”,这样所有的按钮都会返回到初始状态。下面是示例代码:
HTML:
```
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>
```
JavaScript:
```
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('click', () => {
buttons.forEach(btn => {
btn.classList.remove('active');
btn.classList.add('btn');
});
button.classList.add('active');
});
});
```
在这个例子中,当用户点击一个按钮时,所有其他按钮都会返回到初始状态,并且被点击的按钮会被添加一个“active”类名以表示它是当前选中的按钮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)