记录一点,小技巧。直接上代码喽,因为今天还没有功夫扯皮呢。

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

实现效果: