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

$("li").click(function(){
    $(this).toggleClass("enable");
    $(this).siblings().removeClass("enable");
})

Answer 2

首先你要定义样式
.one{background:#000;}
.two{background:#ccc;}
然后绑定js事件
$('.enable li').toggle(function(){$(this).removeClass('two').addClass('one')},function(){$(this).removeClass('one').addClass('two')})

追问

加载了css、js和jquery，js
$('ul>li').toggle(function(){$(this).removeClass('two').addClass('one')},function(){$(this).removeClass('one').addClass('two')})
，css定义li .one .two,无效

Answer 3

//下面通过选择器找到所有符合的li元素
$("li").click(function(){
       //清空所有li的背景颜色，重置为默认颜色
       //也可以记录上一个li元素，只清空他一个，就不用找到所有li清除了
   $("li").css("background-color","#000");
      //将当前的li设置背景颜色
   $(this).css("background-color","#ccc");
})

如上是手打，按照上面意思处理即可