利用 Siblings一步实现多个同级div，只改变当前点击的div样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用 Siblings一步实现多个同级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‘); // 删除其他兄弟元素的样式//jQuery siblings() 方法返回被选元素的所有同胞元素，并且可以使用可选参数来过滤对同胞元素的搜索。
$(this).addClass(‘light_greycolor‘);
});
});
</script>
</html>实现效果：
以上是关于利用 Siblings一步实现多个同级div，只改变当前点击的div样式的主要内容，如果未能解决你的问题，请参考以下文章