DIV隐藏加显示，在Javascript中的方法代码怎么写啊！！！【急，急，急】

情况是这样的，放了几个div，有的不隐藏有的隐藏，现在是想点击不隐藏的DIV然后把隐藏的div显示出来，Javascript的方法代码怎么写的啊！！求解！

解决方案 »

  1.   

    是这样的，放了四个不隐藏的DIV，每个不隐藏的div下面又放了一个隐藏的DIV，要求是点击第一个不隐藏的DIV，就显示下面隐藏的DIV，然后点击第二个不隐藏的DIV，显示下面隐藏的DIV，然后把第一个显示出来的DIV又隐藏起来！  表达能力可能不是很好，希望各位大哥能看懂我说的！
      

  2.   

    var obj = document.getElementById("divPopup");
    //显示
    obj.visibility = "visible";
    //隐藏
    obj.visibility = "none";
      

  3.   

     <script language="javascript" type="text/javascript">
         function show(){
                var obj=document.getElementById("div")
                obj.visibility = "visible";
                obj.visibility = "none";
            
         }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table>
        <tr>
        <td>
        <a href="javascript:;" onclick="show()"> 第一行</a>
        </td>
        </tr>
        </table>
        </div>
        <div id="div1" style="display:none">
        <table>
        <tr>
        <td>第一小行</td>
        </tr>
        <tr>
        <td>第二小行</td>
        </tr>
        </table>
        </div>
            <div>
        <table>
        <tr>
        <td>
        <a href="javascript:;" onclick="show()"> 第二行</a>
        </td>
        </tr>
        </table>
        </div>
        <div id="div2" style="display:none">
        <table>
        <tr>
        <td>第一小行</td>
        </tr>
        <tr>
        <td>第二小行</td>
        </tr>
        </table>
        </div>
               <div>
        <table>
        <tr>
        <td>
        <a href="javascript:;" onclick="show()"> 第三行</a>
        </td>
        </tr>
        </table>
        </div>
        <div id="div3" style="display:none">
        <table>
        <tr>
        <td>第一小行</td>
        </tr>
        <tr>
        <td>第二小行</td>
        </tr>
        </table>
        </div>
               <div>
        <table>
        <tr>
        <td>
        <a href="javascript:;" onclick="show()"> 第四行</a>
        </td>
        </tr>
        </table>
        </div>
        <div id="div4" style="display:none">
        <table>
        <tr>
        <td>第一小行</td>
        </tr>
        <tr>
        <td>第二小行</td>
        </tr>
        </table>
        </div>
        </form>
    </body>
    </html>
    看看这个里面哪里需要弄下啊！效果没出来！
      

  4.   

    lz，我把显示和隐藏都写在一块了。你这么调当然不显示啦obj.visibility = "none"; 去掉。
      

  5.   

    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    //显示div1
    div1.visibility = "visible";
    //隐藏div2
    div2.visibility = "none";
      

  6.   

    var div1 = document.getElementById("div1");div1.style.display = "none";   //隐藏
    div1.style.display = "block";  //显示
      

  7.   

    这个应该是你的要求
    <script language="javascript" type="text/javascript">
      function show(obj){
    document.getElementById("div1").style.visibility= "visible";
    document.getElementById("div11").style.visibility= "hidden";
    document.getElementById("div2").style.visibility= "visible";
    document.getElementById("div22").style.visibility= "hidden";
    document.getElementById("div3").style.visibility= "visible";
    document.getElementById("div33").style.visibility= "hidden";
    document.getElementById("div4").style.visibility= "visible";
    document.getElementById("div44").style.visibility= "hidden";
    if(obj==1){
    document.getElementById("div1").style.visibility= "hidden";
    document.getElementById("div11").style.visibility= "visible";
    }else if(obj==2){
    document.getElementById("div2").style.visibility= "hidden";
    document.getElementById("div22").style.visibility= "visible";
    }else if(obj==3){
    document.getElementById("div3").style.visibility= "hidden";
    document.getElementById("div33").style.visibility= "visible";
    }else if(obj==4){
    document.getElementById("div4").style.visibility= "hidden";
    document.getElementById("div44").style.visibility= "visible";
    }
        
      }
      </script>
    </head>
    <body>
      <form id="form1" runat="server">
    <div id="div1">
      <table>
      <tr>
      <td>
      <a href="javascript:void(0);" onclick="show(1)"> 第一行</a>
      </td>
      </tr>
      </table>
    </div>
    <div id="div11" style="visibility:hidden">
      <table>
      <tr>
      <td>第一小行</td>
      </tr>
      <tr>
      <td>第二小行</td>
      </tr>
      </table>
    </div>    <div id="div2">
      <table>
      <tr>
      <td>
      <a href="javascript:void(0);" onclick="show(2)"> 第二行</a>
      </td>
      </tr>
      </table>
    </div>
    <div id="div22" style="visibility:hidden">
      <table>
      <tr>
      <td>第一小行</td>
      </tr>
      <tr>
      <td>第二小行</td>
      </tr>
      </table>
    </div> <div id="div3">
      <table>
      <tr>
      <td>
      <a href="javascript:void(0);" onclick="show(3)"> 第三行</a>
      </td>
      </tr>
      </table>
    </div>
    <div id="div33" style="visibility:hidden">
      <table>
      <tr>
      <td>第一小行</td>
      </tr>
      <tr>
      <td>第二小行</td>
      </tr>
      </table>
    </div> <div id="div4">
      <table>
      <tr>
      <td>
      <a href="javascript:void(0);" onclick="show(4)"> 第四行</a>
      </td>
      </tr>
      </table>
     </div>
     <div id="div44" style="visibility:hidden">
      <table>
      <tr>
      <td>第一小行</td>
      </tr>
      <tr>
      <td>第二小行</td>
      </tr>
      </table>
     </div>
      </form>
    </body>
    </html>
    你在js中使用的style.visibility，但是div上设置的是style="display:none"，所以div没有隐藏；
    visibility是隐藏后页面显示空白， 
    display是div隐藏后释放占用的页面空间，
    选择哪个要看你的页面效果