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

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

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

实现效果:


版权声明:本文为qq_40687809原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。