随笔- 348 文章- 275 评论- 9 阅读- 78万

利用JS做到隐藏div和显示div

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="msg" >出现显示的内容</div> 

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>