Question

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

html代码：
<div>
<ul>

<li class="enable"></li>
<li></li>
<li></li>
<li></li>

</ul>
</div>
js：用的是jquery-1.7.1.min.js
问题：点击一个li，背景换为#ccc，再点击换为#000;每个li是独立的。该怎样写js呢？
初学，求指教啊

Answer 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

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

Answer 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 写成 @小齐炖博士 的方式，操作起来更方便！

希望对你有帮助！！

追问

感谢您的帮助！无反应，用了博士的也无反应。复制了你代码过去，加载了css、js和jquery-1.7.1-min

追答

你好！！

<script>
$(function(){
    //代码是否写在这里?
});
</script>

Answer 3

假设有div元素<div id="mydiv" class="css1">，和两个样式: .css1{} .css2{}
(1)移除和添加样式分别是$("mydiv").removeClass("css1") 和$("mydiv").addClass("css1")
(2)如果是换了样式之后，想换回原来的样式，即是切换样式，那么就涉及到一个判断当前样式的问题，此时可以使用方法hasClass()，该方法是判断元素当前是否含有某样式。
(3)所以根据1、2可以实现一个点击切换样式的效果，示例代码如下：
<script type="text/javascript">
$("#mydiv").click(function () {
if ($(this).hasClass("css1")) {
$(this).removeClass("css1")
$(this).addClass("css2")
} else if ($(this).hasClass("css2")) {
$(this).removeClass("css2")
$(this).addClass("css1")
}
})
</script>
(手写不易，望采纳！)

Answer 4

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

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

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

Answer 5

active 就是你想要添加的样式