有多个div怎么实现单选框那样点击其中一个让其他div取消选中（变色）的效果 js

发布网友发布时间：2022-05-25 11:57

共2个回答

热心网友时间：2023-10-24 22:50

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body,div { margin: 0; padding: 0; }
.wrap div { display: inline-block; width: 60px; height: 30px; margin: 40px 5px; border-radius: 5px; background: #ccc; cursor: pointer; }
.wrap .active { background: #f80; }
</style>
</head>
<body>
<div class="wrap">
<div class="active"></div>
<div></div>
<div></div>
</div>
<script>
var wrap = document.querySelector('.wrap');
wrap.onclick = function(e){
var $this = e.srcElement || e.target;
Array.prototype.slice.call(this.children).forEach(function(value){
value.className = '';
})
$this.className = 'active';
}
</script>
</body>
</html>

热心网友时间：2023-10-24 22:51

//同类div单选效果
$(".left1").click(function (){//前提：div的class相同【left1】，id不同
//设置当前点中div的背景颜色
$(this).css("background-color","#E43C59");
//获取当前点中div的id ==> id
var id = $(this).attr("id");
//遍历这些同class名div
$("div[class='left1']").each(function() {
//获取当前遍历div的id ==>id2
var id2 = $(this).attr("id");
//若选中id与遍历id不同，则将背景设置为另外一种颜色
if(id != id2){
$(this).css("background-color","#293C55");
}
});
});