一步实现多个同级div，只改变点击的当前div样式

最新推荐文章于 2023-02-16 20:58:15 发布

Thinking_Of_RedAnt

最新推荐文章于 2023-02-16 20:58:15 发布

阅读量4.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： html技术文章标签：一步实现多个同级div，只改变点击的当前div样式

本文链接：https://blog.youkuaiyun.com/qq_40687809/article/details/82321538

html技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的前端技巧，通过jQuery实现点击时仅改变被点击div的样式而清除其他同级div的样式。适用于需要高亮显示选中项的场景。

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

记录一点小技巧，直接上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一步实现多个同级div，只改变点击的当前div样式</title>
	</head>
    <script type="text/javascript" src="js/jquery.js" ></script>
	<body>
		<div id="little_light">
		  <div >我是第一个同级div</div>
		  <div>我是第二个同级div</div>
		  <div>我是第三个同级div</div>
		  <div>我是第四个同级div</div>
		  <div>我是第五个同级div</div>
		  <div>我是第六个同级div</div> 
		  <div>我是第七个同级div</div>
		</div>
	</body>
	<style>
		.light_greycolor {
		    background-color:#FF8400;
		}
		div{
			width: 140px; 
			height: 30px;
			}
	</style>
	<script>
    $(function(){
    $("#little_light div").bind("click",function(){
        $(this).siblings('div').removeClass('light_greycolor');  // 删除其他兄弟元素的样式
        $(this).addClass('light_greycolor'); 
    	});
	});
</script>

</html>

实现效果：