当前位置：首页 → 问答吧 → 关于div隐藏/显示的求助

关于div隐藏/显示的求助

时间：2011-08-30

来源：互联网

最近才开始接触ASP，遇到一个问题，在此请教各位大侠了

有三个DIV水平排列，从左至右，依次为DIV1（display：block）,DIV2,DIV3

现在我想点击一个按钮后，使得DIV1为隐藏状态，而div2.width=div1.width+div2.width，div3不变
再点一下按钮，DIV1变为显示状态，

作者: wyh8462 发布时间: 2011-08-30

写一个JS，点击按钮的时候触发就好了。

作者: xiezhou927 发布时间: 2011-08-30

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script>
  function ShowDiv()
  {
    var div1_display=document.getElementById("test1").style.display;
    var div2_width=document.getElementById("test1").style.width;
    if (div1_display=="none")
    {
       document.getElementById("test1").style.display="block";
       document.getElementById("test2").style.width="300px";
    }
    else
    { 
       document.getElementById("test1").style.display="none";
       document.getElementById("test2").style.width="600px";
    }
  }
  </script>
 </head>

 <body>
 <input type="button" value="Show" onclick="ShowDiv()"/>
  <div id="test1" style=" width:300px; height:200px; background:#fec; float:left;"></div>
  <div id="test2" style=" width:300px; height:200px; background:#efc; float:left;"></div>
  <div id="test3" style=" width:300px; height:200px; background:#cfe; float:left;"></div>
 </body>
</html>

作者: caiwang_net 发布时间: 2011-08-30

关于div隐藏/显示的求助

热门阅读

热门下载