jquery多元素点击改变点击元素的样式
时间: 2023-09-12 19:07:49 浏览: 48
你可以使用 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` 类会被移除,从而改变按钮的样式。
相关问题
jquery 选中元素时改变背景色及文字颜色 其他背景色及文字颜色恢复
可以使用以下代码实现:
```javascript
// 给需要选中的元素添加一个 class,比如 selected
$('.selected').css({
'background-color': 'red', // 改变背景色为红色
'color': 'white' // 改变文字颜色为白色
});
$('.selected').siblings().css({
'background-color': '', // 其他兄弟元素的背景色恢复为空
'color': '' // 其他兄弟元素的文字颜色恢复为空
});
```
这里同样假设需要选中的元素已经添加了一个 `selected` 的 class,如果没有,可以根据实际需求修改。同时,`css()` 方法也可以接受一个对象作为参数,这样就可以同时修改多个样式属性了。
jquery改变css样式
可以使用`css()`方法来改变元素的 CSS 样式。
以下是一个例子,将 ID 为 `myDiv` 的元素的背景颜色更改为红色:
```javascript
$("#myDiv").css("background-color", "red");
```
如果你要更改多个样式,可以将它们作为对象传递:
```javascript
$("#myDiv").css({
"background-color": "red",
"font-size": "24px",
"color": "white"
});
```