怎么在以下代码的div中添加一个关闭按钮，或者说鼠标点击页面的其它地方div自动隐藏
<html><metacharset="gbk"><head><script>varhide=function(){vardivs=document.getElement...
<html>
<meta charset="gbk">
<head>
<script>
var hide=function()
{
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length ;i++ )
{
divs[i].style.display="none";
}
}
window.onload=function(){
hide();
var a=document.getElementsByTagName("td");
for(var i = 0; i < a.length; i++)
{
a[i].onclick = function(oEvent)
{
oEvent = oEvent || event;hide();
document.getElementById("div"+this.id).style.display="block";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="1">
<a href="#">弹出层1</a>
</td>
<td id="2">
<a href="#">弹出层2</a>
</td>
<td id="3">
<a href="#">弹出层3</a>
</td>
</tr>
</table>
<div id="div1" style="background:#0F0; width:200px; height:100px;">
<p>层1 </p>
</div>
<div id="div2" style="background:#00F;width:200px; height:100px;">
<p>层2 </p>
</div>
<div id="div3" style="background:#F00;width:200px; height:100px;">
<p>层3 </p>
</div>
</body>
</html> 展开
<meta charset="gbk">
<head>
<script>
var hide=function()
{
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length ;i++ )
{
divs[i].style.display="none";
}
}
window.onload=function(){
hide();
var a=document.getElementsByTagName("td");
for(var i = 0; i < a.length; i++)
{
a[i].onclick = function(oEvent)
{
oEvent = oEvent || event;hide();
document.getElementById("div"+this.id).style.display="block";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="1">
<a href="#">弹出层1</a>
</td>
<td id="2">
<a href="#">弹出层2</a>
</td>
<td id="3">
<a href="#">弹出层3</a>
</td>
</tr>
</table>
<div id="div1" style="background:#0F0; width:200px; height:100px;">
<p>层1 </p>
</div>
<div id="div2" style="background:#00F;width:200px; height:100px;">
<p>层2 </p>
</div>
<div id="div3" style="background:#F00;width:200px; height:100px;">
<p>层3 </p>
</div>
</body>
</html> 展开
1个回答
展开全部
（一）加入关闭按钮只要再加一个onclick 时间就行了，turnoff（‘ ’）里的参数可以改变。代码如下
<html>
<meta charset="gbk">
<head>
<script>
var hide=function()
{
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length ;i++ )
{
divs[i].style.display="none";
}
}
window.onload=function(){
hide();
var a=document.getElementsByTagName("td");
for(var i = 0; i < a.length; i++)
{
a[i].onclick = function(oEvent)
{
oEvent = oEvent || event;hide();
document.getElementById("div"+this.id).style.display="block";
}
}
}
// 加入关闭操作的函数
function turnoff(obj){
document.getElementById(obj).style.display="none";
}
</script>
</head>
<body>
<table >
<tr>
<td id="1">
<a href="#">弹出层1</a>
</td>
<td id="2">
<a href="#">弹出层2</a>
</td>
<td id="3">
<a href="#">弹出层3</a>
</td>
</tr>
</table>
<div id="div1" style="background:#0F0; width:200px; height:100px;">
<p>层1 </p><a href="#" onclick="turnoff('div1')">点击关闭</a>
</div>
<div id="div2" style="background:#00F;width:200px; height:100px;">
<p>层2 </p><a href="#" onclick="turnoff('div2')">点击关闭</a>
</div>
<div id="div3" style="background:#F00;width:200px; height:100px;">
<p>层3 </p><a href="#" onclick="turnoff('div3')">点击关闭</a>
</div>
</body>
</html>
（二）点击div之外的地方隐藏div，方法多种，但都是通过 js操作到事件源，判断这个事件源的ID是不是在要隐藏的div 即点击事件发生的范围是否在div之外，但前提是事件不能和你前面写的js事件发生冲突。 注册一个document.onclick或者document.onmousedown事件来监控鼠标点击div以外的区域时事件，你给这个div的id属性赋一个页面唯一的值比如<div id="tAnChu" />
代码如下：
document.onclick = function (event)
{
var e = event || window.event;
var elem = e.srcElement||e.target;
while(elem)
{
if(elem.id == "tAnChu")
{
return;
}
elem = elem.parentNode;
}
//隐藏div的方法
HiddenDiv();
}
上个单一div事例：
<html>
<head>
<script type='text/javascript'>
window.onload = function(){
document.onclick = function(e){
e = e || window.event;
var dom = e.srcElement|| e.target;
if(dom.id !="tAnChu" && document.getElementById("tAnChu").style.display == "block")
{
document.getElementById("tAnChu").style.display = "none";
}
};
};
function openTanChu(e) {
document.getElementById("tAnChu").style.display = "block";
e = e||window.event;
if(+'\v1') {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
</script>
<style>
#tAnChu{
position:fixed;
left:40%;
top:100px;
background-color:#ccc;
width:200px;
height:120px;
display:none;
}
</style>
</head>
<body>
<input type="button" value="打开" onclick="openTanChu(event)" />
<div id="tAnChu">
这是弹出层
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
