jquery 点击增加样式，点击移除样式

jquery 点击增加样式，点击移帆缓谨除样式，代码如下：

$("li").click(function(){

$(this).toggleClass("enable")

$(this).siblings().removeClass("enable")

})

扩展资料

如果用户单击某个按钮时，要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法来完成，它的作哪锋用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的态基JQuery代码来删除p元素中值为“high”的class:

$("p").removeClass("high")

//移除p元素中值为"high"的class

参考资料：百度百科 jQuery

百度百科 样式 （计算机术语）

思路：点击当前li元素后是用removeClass()删除所有兄弟元素（使用旁高siblings()获取）的class样式，然后码搏使用addClass()为当前li添加class。

具体演示如下：

1、HTML结构：设计三个li元素

<ul id="test">

    <li>Glen</li>

  迟启祥  <li>Tane</li>

    <li>John</li>

</ul>

2、css样式：设计一个类selected，表示选中后的效果

<style>

.selected{font-weight:boldbackground: #ff99cccolor:#fff}

</style>

3、jquery代码：

$(function(){

    $("#test li").click(function() {

        $(this).siblings('li').removeClass('selected') // 删除其他兄弟元素的样式

        $(this).addClass('selected')                            // 添加当前元素的样式

    })

})

4、效果演示：

---