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

然后我有两个列表，当我单击图像更改时，所有 li 都显示图像“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>

Answer 2

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

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