jquery点击li的时候给自己的子元素a添加样式并且点击其他li的时候移除现在的样式
时间: 2024-02-28 11:56:56 浏览: 23
可以通过以下代码实现:
```javascript
$('li').click(function() {
// 给自己的子元素a添加样式
$(this).children('a').addClass('active');
// 移除其他li的子元素a的样式
$(this).siblings().children('a').removeClass('active');
});
```
其中,`addClass`和`removeClass`用于添加和移除样式,`children`用于选择子元素,`siblings`用于选择其他兄弟元素。
相关问题
jQuery点击li标签改变颜色,其他li标签不变
可以使用jQuery的`click`事件和`addClass`方法来实现点击`li`标签改变颜色,其他`li`标签保持不变的效果。下面是一个示例代码:
HTML:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
```
CSS:
```css
.selected {
color: red;
}
```
jQuery:
```javascript
$(document).ready(function() {
$("li").click(function() {
$("li").removeClass("selected"); // 移除所有li的selected类
$(this).addClass("selected"); // 添加selected类到当前点击的li
});
});
```
这段代码首先在页面加载完成后绑定了每个`li`元素的`click`事件。当用户点击某个`li`标签时,移除所有`li`元素的`selected`类,然后将`selected`类添加到当前点击的`li`元素上。这样就能实现点击某个`li`标签改变颜色,其他`li`标签保持不变的效果。
jquery点击切换li加背景颜色
好的,您可以使用以下代码实现:
HTML部分:
```
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
```
jQuery部分:
```
$("li").click(function() {
$("li").removeClass("active"); //移除所有li的active类
$(this).addClass("active"); //给当前点击的li添加active类
});
```
CSS部分:
```
.active {
background-color: #ccc; //选中的li的背景颜色
}
```
这段代码会在每次点击li时,移除所有li的active类,然后给当前点击的li添加active类,从而改变选中的li的背景颜色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)