Question

我有两个HTML列表，我需要一个选择我的“活动”类，另一个忽略它。

这是我的CSS，我显示图像“icon-plus.gif”，当用户点击li时，图像变为“icon-minus.gif”

    li:before {content: url("icon-plus.gif");}
    li.active:before {content: url("icon-minus.gif");}

然后我有两个列表，当我点击图像更改时，所有li都显示图像“icon-plus.gif”。

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul> 

<ul>
  <li>Bread</li>
  <li>Apples</li>
</ul>

两者都在显示图像！真的不明白为什么，我的想法就是在李里面上课：

<ul>
  <li class"active">Coffee</li>
  <li class"active">Milk</li>
</ul>

代码是从internet下载的。谢谢

Answer 1

使用JQuery：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("li").click(function () {
  // Remove active class from all li elements
  $("li").removeClass("active");
  // add the active class to your clicked on element
  $(this).addClass("active");
});
</script>

Answer 2

javascript onclick（）事件和jquery的css操作可能会对你有所帮助。这是一个有用的链接：

http://api.jquery.com/category/css/

基本css li仅对某些元素有效

2 个答案: