在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>

<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按钮的时候层显示出来。我鼠标点击页面别的空白处层就隐藏。请教事件或是方法。先谢谢了

...全文

450 7 打赏收藏转发到动态举报

写回复

用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>