Html 基本css li仅对某些元素处于活动状态

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

这是我的css，我显示了一个图像“icon plus.gif”，当用户点击li时，图像变为“icon-plus.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下载的。感谢javascript onclick（）事件，jquery的css操作可能会对您有所帮助。以下是一个有用的链接：

使用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>

$（“li”）。单击（函数（）{
//从所有li元素中删除活动类
$（“li”）.removeClass（“活动”）；
//将活动类添加到单击的元素中
$（此）.addClass（“活动”）；
});

<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>