如标题,页面上有几个div:
<div style="width:100px; height:100px; position: absolute;left:10px; top:10px; border: 1px solid black; background: white;"></div>
<div style="width:100px; height:100px; position: absolute;left:200px; top:10px; border: 1px solid black; background: white;"></div>
。当鼠标点击时如果点中div就把当前div背景色设置成red,其他的还原成原来的white,如果没点中div,把上一次设置成red的还原成white。本人新手,希望各位大神不要见笑,谢谢!
<div style="width:100px; height:100px; position: absolute;left:10px; top:10px; border: 1px solid black; background: white;"></div>
<div style="width:100px; height:100px; position: absolute;left:200px; top:10px; border: 1px solid black; background: white;"></div>
。当鼠标点击时如果点中div就把当前div背景色设置成red,其他的还原成原来的white,如果没点中div,把上一次设置成red的还原成white。本人新手,希望各位大神不要见笑,谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<title>无标题文档</title>
</head><body>
<div style="width:100px; height:100px; position: absolute;left:10px; top:10px; border: 1px solid black; background: white;"></div>
<div style="width:100px; height:100px; position: absolute;left:200px; top:10px; border: 1px solid black; background: white;"></div><script type="text/javascript">
jQuery(function($){
$(document).bind("click",function(e){
$('div').each(function(){
if($(e.target).closest($(this)).length == 0){
$(this).css({'backgroundColor': '#fff'});
}else{
$(this).css({'backgroundColor': '#f00'});
}
});
});
});
</script>
</body>
</html>
var allDiv=$("div").click(function(){
allDiv.css("background-color","#fff");
this.style.backgroundColor="red";
return false;
});
$(window.body).click(function(event){
if(eventPhase==3)return false;
allDiv.css("background-color","#fff");
});
});
<body>
<div style="width:100px; height:100px; position: absolute;left:10px; top:10px; border: 1px solid black; background: white;"></div>
<div style="width:100px; height:100px; position: absolute;left:200px; top:10px; border: 1px solid black; background: white;"></div>
</body>
<script>
$(document).click(function(e){
if(e.target.tagName.toUpperCase()=="DIV"){
$("div").css("background", "white")
$(e.target).css("background", "red")
}
});
</script>