jQuery中的列表点击时改变Class位置，修改css 样式

最新推荐文章于 2024-07-24 13:52:34 发布

_夜渐凉

最新推荐文章于 2024-07-24 13:52:34 发布

阅读量3.2k

点赞数

分类专栏： ------【jQuery】文章标签： jQuery html

本文链接：https://blog.csdn.net/weixin_41888813/article/details/82385438

版权

------【jQuery】专栏收录该内容

2 篇文章 1 订阅

订阅专栏

需求效果如下：

jQuery思路：

点击当前li元素后是用removeClass()删除所有兄弟元素（使用siblings()获取）的class样式，

然后使用addClass()为当前的 li 添加class，从而达到了切换class的位置。

HTML结构

<ul id="test">
	<li class="expert_city_active">
            <p><a style="cursor:pointer;" @click=" queryExpertByCity()">不限城市</a></p>
        </li>
        <li>
            <p><a style="cursor:pointer;" @click=" queryExpertByCity('1000000200')">广州</a></p>
        </li>
</ul>

jquery代码

$(function(){
    $('.expert_city ol li').click(function(event) {
        $(this).addClass('expert_city_active');
        $(this).siblings().removeClass('expert_city_active');
    });
    $('.medicine ol li').click(function(event) {
        $(this).addClass('medicine_active');
        $(this).siblings().removeClass('medicine_active');
    })
})

以上是使用jQuery实现的方法；

如果在Vue中可以直接使用 :class绑定

https://blog.csdn.net/weixin_41888813/article/details/82385849