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

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");}

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

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

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

两者都在显示图像!!!真的不明白为什么，我的想法是在 li 里面上课:

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

代码是从网上下载的，谢谢

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>