div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 

style="visibility: none;"

document.getElementById("typediv1").style.visibility="hidden";//隐藏

document.getElementById("typediv1").style.visibility="visible";//显示

 通过设置display属性可以使div隐藏后释放占用的页面空间如下 

style="display: none;"

document.getElementById("typediv1").style.display="none";//隐藏

document.getElementById("typediv1").style.display="";//显示

 此JS代码中，没有用try——Catch捕获错误，代码如下：

<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
   if(sbtitle.style.display==\'block\'){
   sbtitle.style.display=\'none\';
   }else{
   sbtitle.style.display=\'block\';
   }
}
}
</script>

 <div id=”show” onMouseMove=\’showhidediv(“msg”)\’;>鼠标移动这里</div><!–这里是点击div，ID要下面的ID–> 
<div id=”msg” >出现显示的内容</div> <!–这里是MsgDiv–> 

onMouseMove=\’showhidediv(“msg”)\’; 这里是鼠标动作，可以替换成Click或其他！ 

做两个层之间的切换： 

<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == \'name\') {
   if (name.style.display==\'none\') {
    age.style.display=\'none\';
    name.style.display=\'block\';
   }
} else {
   if (age.style.display==\'none\') {
    name.style.display=\'none\';
    age.style.display=\'block\';
   }
}   
}
</script>
<div id="show" style="float:left;" onMouseMove=\'showhidediv("name")\';>Name：</div><div id="show" style="float:left;" onMouseMove=\'showhidediv("age")\';>Age：</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>

 //示例二 

显示一个层的同时隐藏另一个层 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function showhidediv(id){

var age=document.getElementById("msg_2");

var name=document.getElementById("msg_1");

if (id == \'name\') {

   if (name.style.display==\'none\') {

    age.style.display=\'none\';

    name.style.display=\'block\';

   }

} else {

   if (age.style.display==\'none\') {

    name.style.display=\'none\';

    age.style.display=\'block\';

   }

}   

}

-->

</script>

</script>

</head>

<body>

<div id="msg_1" style="display:block;float:left;" onclick=\'showhidediv("age")\';>

<p id="photoTitle" >单击此处添加描述</p></div>

<div id="msg_2" style="display:none;float:left;" >

<form id="">

<textarea class="textarea" id="" name=""></textarea>

<div class="">

<input type="button" value="保存" class="" id="">

<input type="button" value="取消" class="" id="" onclick=\'showhidediv("name")\';>

</div>

<input type="hidden" name="" value=""></form>

</div>

</body>

</html>

 

版权声明：本文为qingsong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qingsong/p/5365218.html