DIV类似失去焦点事件(点击层外层隐藏)
2011-07-28 11:22 三皮开发时 阅读(903) 评论(0) 编辑 收藏 举报<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aa(divname, num){
var a = document.getElementsByName(divname);
for (var i = 0; i < a.length; i++) {
if (i == num) {
a[i].style.display = 'block';
}
else {
a[i].style.display = 'none';
}
}
}
function inDaohang(divname, obj){
var f = false;
while (obj.parentNode) {
if (obj.name == divname) {
return true;
}
obj = obj.parentNode;
}
return false;
}
function closeDaohang(e, divname, aname){
if (e.id != aname)
if (!inDaohang(divname, e)) {
var a = document.getElementsByName(divname);
for (var i = 0; i < a.length; i++) {
a[i].style.display = 'none';
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onclick="closeDaohang(event.srcElement||event.target,'div_daohang','a_daohang')">
<a id="a_daohang" href="javascript:;" onclick="aa('div_daohang',0)">AAAA</a>
<a id="a_daohang" href="javascript:;" onclick="aa('div_daohang',1)">AAAA</a>
<a id="a_daohang" href="javascript:;" onclick="aa('div_daohang',2)">AAAA</a>
<div id="div_daohang" name="div_daohang" style="position:absolute;left:10px;top:200px;width:200px;height:100px;border:1px solid #333333;display:none">
<a href="javascript:;">111</a>
</div>
<div id="div_daohang" name="div_daohang" style="position:absolute;left:100px;top:200px;width:200px;height:100px;border:1px solid #333333;;display:none">
<a href="javascript:;">222</a>
</div>
<div id="div_daohang" name="div_daohang" style="position:absolute;left:200px;top:200px;width:200px;height:100px;border:1px solid #333333;;display:none">
<a href="javascript:;">333</a>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aa(divname, num){
var a = document.getElementsByName(divname);
for (var i = 0; i < a.length; i++) {
if (i == num) {
a[i].style.display = 'block';
}
else {
a[i].style.display = 'none';
}
}
}
function inDaohang(divname, obj){
var f = false;
while (obj.parentNode) {
if (obj.name == divname) {
return true;
}
obj = obj.parentNode;
}
return false;
}
function closeDaohang(e, divname, aname){
if (e.id != aname)
if (!inDaohang(divname, e)) {
var a = document.getElementsByName(divname);
for (var i = 0; i < a.length; i++) {
a[i].style.display = 'none';
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onclick="closeDaohang(event.srcElement||event.target,'div_daohang','a_daohang')">
<a id="a_daohang" href="javascript:;" onclick="aa('div_daohang',0)">AAAA</a>
<a id="a_daohang" href="javascript:;" onclick="aa('div_daohang',1)">AAAA</a>
<a id="a_daohang" href="javascript:;" onclick="aa('div_daohang',2)">AAAA</a>
<div id="div_daohang" name="div_daohang" style="position:absolute;left:10px;top:200px;width:200px;height:100px;border:1px solid #333333;display:none">
<a href="javascript:;">111</a>
</div>
<div id="div_daohang" name="div_daohang" style="position:absolute;left:100px;top:200px;width:200px;height:100px;border:1px solid #333333;;display:none">
<a href="javascript:;">222</a>
</div>
<div id="div_daohang" name="div_daohang" style="position:absolute;left:200px;top:200px;width:200px;height:100px;border:1px solid #333333;;display:none">
<a href="javascript:;">333</a>
</div>
</BODY>
</HTML>
