怎么实现一个div的隐藏与显示-HTML教程-爱易网页

怎么实现一个div的隐藏与显示

日期：2014-05-17　浏览次数：20883 次

如何实现一个div的隐藏与显示？
页面上有一个按钮和一个div
div默认隐藏，当按按钮的时候div居中显示，后页面变灰。
按确定后，div重新隐藏，后页面显示。

如果先设置div的display:none
document.getElementById("id1")就找不到id1这个div

怎样实现一个div的隐藏与显示？

------解决方案--------------------
刚好我昨天帮别人做了两个
代码给你自己看吧

HTML code

<style type="text/css">
<!--
.menu{
    border:red 1px solid;
    position:absolute;
    width:100px;
    height:auto !important;
    height:100%;
    top:42px !important;
    top: 41px;    
    z-index:99;
    display:none;
    border:#ccc 1px solid;
    color:#ccc;
}

ul{
   text-align:left;
}

ul li{
   display:block;
   list-style-type: none; 
   float:left;
   width:100px;
   height:25px;
   border-right:red 1px solid;
   border-bottom:red 1px solid;
   border-top:red 1px solid;
   line-height:25px;
}

ul li#first{
   border-left:red 1px solid;
}
   
ul li a{
   margin-left:30px;
   text-decoration:none;
   color:#000;
   
}

ul li a:hover{
   margin-left:30px;
   text-decoration:none;
   color:#CCC;
   
}

-->
</style>
<script language="javascript">
function $(id){
  return document.getElementById(id);
}

function Show(arg){
  $(arg).style.display="block";
}

function Hide(arg){
  $(arg).style.display="none";
}

</script>
  <ul>
  <li onmouseover="Show('menu1')" onmouseout="Hide('menu1')" id="first"><a href="#">menu1</a><br />
       <div id="menu1" class="menu" ><!--级联菜单-->
          <table>
            <tr><td>menu1_1</td></tr>
            <tr><td>menu1_1</td></tr>
            <tr><td>menu1_1</td></tr>
          </table>      
       </div>
  </li>
  <li onmouseover="Show('menu2')" onmouseout="Hide('menu2')"><a href="#">menu2</a><br />
        <div id="menu2" class="menu"><!--级联菜单-->
          <table>
            <tr><td>menu2_1</td></tr>
            <tr><td>menu2_1</td></tr>
            <tr><td>menu2_1</td></tr>
          </table>
        </div></li>
  <li onmouseover="Show('menu3')" onmouseout="Hide('menu3')"><a href="#">menu3</a><br />
        <div id="menu3" class="menu"><!--级联菜单-->
          <table>
            <tr><td>menu3_1</td></tr>
            <tr><td>menu3_1</td></tr>
            <tr><td>menu3_1</td></tr>
          </table>
        </div>
  </li>
  <li onmouseover="Show('menu4')" onmouseout="Hide('menu4')"><a href="#">menu4</a><br />
        <div id="menu4" class="menu"><!--级联菜单-->
          <table>
            <tr><td>menu4_1</td></tr>
            <tr><td>menu4_1</td></tr>
            <tr><td>menu4_1</td></tr>
          </table>
        </div>
  </li>
  </ul>

  <p>&nbsp;</p>
  <p>实现边框不重叠的效果还有一种办法就是marig属性 加上背景 有很细的裂缝 可以看成是边框</p>

------解决方案--------------------
IE6 FF2测试通过

<!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" />
<title></title>
<STYLE>
#login{
   positio

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎么实现一个div的隐藏与显示

相关资料更多>

推荐阅读更多>