记录一点,小技巧。直接上代码喽,因为今天还没有功夫扯皮呢。
<!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>
实现效果:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。