在HTML中用JavaScript实现一个层的隐藏和显示(button控件)小问题?

YangBHMing 2011-05-16 11:58:36
我的代码是这样的:

<!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=gb2312" />
<title>无标题文档</title>
</head>
<script>
function ok1()
{
var a=document.getElementById("div1");
if(a.style.display=="none")
a.style.display="block";
else
a.style.display="none";
}
</script>

<body>
<!-- onmouseout="ok1()" onmouseover="ok1()" -->
<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input type="button" value="显示/隐藏" onclick="ok1();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-

color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>


我想大家看了代码就知道效果了,就是简单的层的隐藏和显示,但我有一个问题
我这个效果是点击button按钮 下面的层显示出来 ,再点击下按钮 层就隐藏。这不是 我要的效果
我想在我点击button按钮的时候层显示出来。我鼠标点击页面别的空白处层就隐藏。请教事件或是方法 。先谢谢了

...全文
446 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
xuexiaodong2009 2011-05-16
  • 打赏
  • 举报
回复
使用blur事件隐藏
IT流渊 2011-05-16
  • 打赏
  • 举报
回复

<!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=gb2312" />
<title>无标题文档</title>
</head>
<script>
function ok1()
{
var a=document.getElementById("div1");
if(a.style.display=="none")
a.style.display="block";
else
a.style.display="none";
}
function ok2()
{
var a=document.getElementById("div1");
if(a.style.display=="none")
a.style.display="block";

}
this.onclick= function(res){

if(window.event.srcElement.tagName != "INPUT")
{
var a=document.getElementById("div1");
if(a.style.display!="none")
a.style.display="none";

}


}
</script>

<body>
<!-- onmouseout="ok1()" onmouseover="ok1()" -->
<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input type="button" value="显示/隐藏" onclick="ok2();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-

color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>

YangBHMing 2011-05-16
  • 打赏
  • 举报
回复
自己先顶下,各位高手帮忙啊!
fenxuehaiyan 2011-05-16
  • 打赏
  • 举报
回复
也可以增加一个透明的遮罩层,位于显示层和页面之间,点击遮罩层时,将这两个层隐藏掉

类似于相册查看时的那种效果
汉尼拔 2011-05-16
  • 打赏
  • 举报
回复
我下面的代码只能在ie下有效,

由于在ff下div无法focus,所以在ff下,下面代码无效.

等待能够兼容ff的代码!!!!


<!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=gb2312" />
<title>无标题文档</title>
</head>
<script>
function ok1()
{
var a=document.getElementById("div1");
if(a.style.display=="none") {
a.style.display="block";a.focus()}
else
a.style.display="none";
}
window.onload= function(){
document.getElementById("div1").onblur=function(){
this.style.display = 'none';
};
}
</script>

<body>
<!-- onmouseout="ok1()" onmouseover="ok1()" -->
<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input type="button" value="显示/隐藏" onclick="ok1();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-

color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>
猿敲月下码 2011-05-16
  • 打赏
  • 举报
回复
<!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" />
<title>无标题文档</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function init(){
var doc = document;
doc.onclick = function(e){
e = window.event||e;
obj = e.srcElement ? e.srcElement : e.target;
var id = obj.id;
if(id != 'btnId'){
doc.getElementById("div1").style.display = "none";
}
}
}
//-->
</SCRIPT>
</head>
<script>
function ok1()
{
document.getElementById("div1").style.display = "block";
}
</script>

<body onload="init()">
<!-- onmouseout="ok1()" onmouseover="ok1()" -->
<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input id="btnId" type="button" value="显示/隐藏" onclick="ok1();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>
猿敲月下码 2011-05-16
  • 打赏
  • 举报
回复
给document绑定一个click事件 判断当点击的地方不是button的时候就隐藏

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧