求:用javascript来控制多个层的显示与隐藏,下个层显示时上个层自动隐藏?

判断div.style.display==""和div.style.display=="none"

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>new page</title>
    <script>
    function show(i){
    document.getElementById("div"+i).style.display="block";
    if(document.getElementById("hidden1").value!=""&&document.getElementById("hidden1").value!="div"+i){
    document.getElementById(document.getElementById("hidden1").value).style.display="none";
    }
    document.getElementById("hidden1").value="div"+i;
    }
    </script>
    </head>
    <body>
    <div id=div1 style="position:absolute;left:0px;top:100px;width:100px;height:100px;background-color:#dddddd;display:none">div1</div>
    <div id=div2 style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#cccccc;display:none">div2</div>
    <div id=div3 style="position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#bbbbbb;display:none">div3</div>
    <div id=div4 style="position:absolute;left:300px;top:100px;width:100px;height:100px;background-color:#aaaaaa;display:none">div4</div>
    <input type=hidden id=hidden1 value="">
    <input type=button value="显示div1" onclick=show(1)>
    <input type=button value="显示div2" onclick=show(2)>
    <input type=button value="显示div3" onclick=show(3)>
    <input type=button value="显示div4" onclick=show(4)>
    </body>
    </html>
      

  2.   

    lihui_shine 的代码有个小问题啊。以下是根据lihui_shine修改的。用的不是input，而是文字。
    当鼠标不经过Div1，而直接移动到2 3 4的时候，Div1的表格并不会隐藏……很奇怪，不知道怎么修改
    <html> 
    <head> 
    <meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "> 
    <title> new   page </title> 
    <script> 
    function show(i){ 
        document.getElementById("div"+i).style.display = "block"; 
        if(document.getElementById("hidden1").value != "" && document.getElementById("hidden1").value != "div" + i){ 
            document.getElementById(document.getElementById("hidden1").value).style.display= "none";
        }
        document.getElementById("hidden1").value= "div"+i; 
    } 
    </script>
    </head>
    <body>
    <div id=div1 style= "position:absolute;left:0px;top:100px;width:100px;height:100px;background-color:#dddddd;display:"> div1 </div>
    <div id=div2 style= "position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#cccccc;display:none"> div2 </div>
    <div id=div3 style= "position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#bbbbbb;display:none"> div3 </div>
    <div id=div4 style= "position:absolute;left:300px;top:100px;width:100px;height:100px;background-color:#aaaaaa;display:none"> div4 </div>
    <input type=hidden id=hidden1 value=""> 
    <table>
        <tr>
            <td onmouseover="show(1)">
                ShowDIV1
            </td>
            <td onmouseover="show(2)">
                ShowDIV1
            </td>
            <td onmouseover="show(3)">
                ShowDIV1
            </td>
            <td onmouseover="show(4)">
                ShowDIV1
            </td>
        </tr>
    <table>
    </body>
    </html>