记录一点小技巧,直接上代码。
<!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>
实现效果: