点击时怎么才能中显示一个层呢？？？

<!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" />
<meta name="description" content="前端思考" />
<meta name="keywords" content="前端思考" />
<title>最简单的弹出层：前端思考</title>
<style>
*{margin:0;padding:0px;}
body{padding:30px;}
#show{width:300px;height:200px;display:none;padding:1px;position:relative;border:1px solid #4c77aa;background:#f2f7fd;margin-left:70px;zoom:1;}
#show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}
#show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}
#show p{padding:5px;}
#text{font-size:12px;text-indent:2em;line-height:20px;}
#show1{width:300px;height:200px;display:none;padding:1px;position:relative;border:1px solid #4c77aa;background:#f2f7fd;margin-left:70px;zoom:1;}
#show1 h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}
#show1 span1{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}
#show1 p{padding:5px;}
#text1{font-size:12px;text-indent:2em;line-height:20px;}
</style>
<script type="text/javascript">
function show(){
var oShow = document.getElementById('show');
oShow.style.display = 'block';
var oClose = document.createElement("span");
oClose.innerHTML = "×";
oShow.appendChild(oClose);
oClose.onclick = function(){
oShow.style.display = 'none';
oShow.removeChild(this);
}
}
function show1(){
var oShow = document.getElementById('show1');
oShow.style.display = 'block';
var oClose = document.createElement("span1");
oClose.innerHTML = "×";
oShow.appendChild(oClose);
oClose.onclick = function(){
oShow.style.display = 'none';
oShow.removeChild(this);
}
}</script>
</head>
<body>
<table >
<tr>
<td><a onclick="show(); return false" href="#">请点击我a1</a></td>
<td>gggg</td>
<td><a onclick="show1(); return false" href="#">请点击我b2</a></td>
</tr>
</table>
<div id="show">
<h3>弹出层标题栏</h3>
<p id="text">
aaaaa1111
</p>
</div><div id="show1">
<h3>弹出层标题栏</h3>
<p id="text1">
bbbbb2222
</p>
</div></body>
</html>点a1时如果b2层开着，就把b2层关了，现在的问题是，点开a1在点b2时两个层都展开了，我想不管点那个只留下一下层

解决方案 »

  1.   

    优化了一下要实现位置；  设置 style.left和style.top属性即可
    <script type="text/javascript">
    function show(i){
    var oShow = document.getElementById('show'+i);
    var oClose = document.createElement("span");

    for(var j=1;j<3;j++){
    var ohide = document.getElementById('show'+j);
    ohide.style.display = "none" ;

    }
    oClose.innerHTML = "×";
    oShow.appendChild(oClose);
    oShow.style.display = "block" ;
    oClose.onclick = function(){
    oShow.style.display = 'none';
    oShow.removeChild(this);
    }

    }
    </script>
    </head>
    <body>
    <table >
    <tr>
    <td><a onclick="show(1);return false" href="#">请点击我a1</a></td>
    <td>gggg</td>
    <td><a onclick="show(2);return false" href="#">请点击我b2</a></td>
    </tr>
    </table>
    <div id="show1">
        <h3>弹出层标题栏</h3>
        <p id="text">
        aaaaa1111
        </p>
    </div><div id="show2">
        <h3>弹出层标题栏</h3>
        <p id="text">
        bbbbb2222
        </p>
    </div>