jquery多元素点击改变点击元素的样式
时间: 2023-09-12 16:07:49 浏览: 237
点击改变样式
4星 · 用户满意度95%
你可以使用 jQuery 的 `click()` 方法来为多个元素绑定点击事件,并使用 `addClass()` 和 `removeClass()` 方法来改变元素的样式。举个例子,如果你想点击一个按钮后,该按钮的背景色变为红色,其他按钮的背景色变为蓝色,可以这样做:
HTML代码:
```html
<button class="btn active">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
```
jQuery代码:
```javascript
$(document).ready(function() {
$('.btn').click(function() {
$('.btn').removeClass('active');
$(this).addClass('active');
});
});
```
CSS代码:
```css
.btn {
background-color: blue;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
.btn.active {
background-color: red;
}
```
这段代码会为所有 `.btn` 类的按钮元素绑定点击事件,当点击某个按钮时,它的 `.active` 类会被添加上去,其他按钮的 `.active` 类会被移除,从而改变按钮的样式。
阅读全文