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

最新推荐文章于 2022-09-01 16:11:49 发布

Rise of Babel

最新推荐文章于 2022-09-01 16:11:49 发布

阅读量1.9k

点赞数 1

分类专栏： CSS

原文链接：https://blog.csdn.net/wangweiscsdn/article/details/73329844?locationNum=3&fps=1

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery简化DOM操作的方法，通过点击事件为列表项动态添加和移除样式，实现高亮显示效果。具体实现了当点击列表中的某一项时，该项会被赋予蓝色字体的样式，而其他项则会恢复默认样式。

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

转载链接：原代码
https://blog.csdn.net/wangweiscsdn/article/details/73329844?locationNum=3&fps=1

<!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(){
	   //注释：给当前点击选中的li元素添加selected样式，给同胞元素删除selected样式
	   $(this).addClass("selected").siblings().removeClass("selected");
	  });
	});
</script>
</body>