jQuery点击li标签改变颜色，其他li标签不变

最新推荐文章于 2023-03-27 17:35:02 发布

原创最新推荐文章于 2023-03-27 17:35:02 发布 · 1.6w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该示例利用jQuery实现列表项的点击高亮效果。当用户点击列表中的某一项时，该项将被突出显示为蓝色，并取消其它项的高亮状态。此功能通过添加和移除CSS类来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-3.2.0.min.js"></script>
	<style>
		.selected{
  color:blue;
}
	</style>
</head>
<body>
<ul>
  <li class="selected">foo1</li>
  <li>foo2</li>
  <li>foo3</li>
  <li>foo4</li>
</ul>
<script>
	$(function(){
  $("li").click(function(){
   $(this).addClass("selected").siblings().removeClass("selected");
  });
});
</script>
</body>
</html>