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

2024-11-08 11:02:03

推荐回答（5个）

回答1：

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

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

回答2：

你好！！

这个问题，可以通过toggle()函数或者toggleClass()函数来解决：

toggle函数，因为本身是基于点击事件来进行事件切换的，因此这里只需要对li进行遍历即可：

$("ul >li").each(function(){
    $(this).toggle(
        function(){
            $(this).css("backgroundColor","#ccc");
        },
        function(){
            $(this).css("backgroundColor","#000");
        }
    );
});

toggleClass函数，需要在对li绑定click事件的基础上进行操作：

$("ul >li").click(function(){
    $(this).toggleClass(function(){
           //rgb(204, 204, 204)==#ccc
           if( $(this).css("backgroundColor")=="rgb(204, 204, 204)" ){
              $(this).css("backgroundColor","#000");
           }else{
              $(this).css("backgroundColor","#ccc");
           }
    });
});

补充一点的是：toggle在jQuery2.0中已经被删除了，

所以如果使用toggle函数还是注意jQuery的版本问题！

当然如果将#ccc和#000 写成 @小齐炖博士的方式，操作起来更方便！

希望对你有帮助！！

回答3：

假设有div元素

，和两个样式: .css1{} .css2{}
(1)移除和添加样式分别是$("mydiv").removeClass("css1") 和$("mydiv").addClass("css1")
(2)如果是换了样式之后，想换回原来的样式，即是切换样式，那么就涉及到一个判断当前样式的问题，此时可以使用方法hasClass()，该方法是判断元素当前是否含有某样式。
(3)所以根据1、2可以实现一个点击切换样式的效果，示例代码如下：

(手写不易，望采纳！)

回答4：

这个用jQuery实现一般是添加一个类和删除一个类。

首先要有一个写好的class样式类。通过下面这个代码实现：

var obj2 = $("div");   // 改变样式的对象
obj2.addClass("className");  // 添加样式，className为已经存在一个class名字
obj2.removeClass("className");  // 删除样式

回答5：

active 就是你想要添加的样式