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

来源：互联网发布：知科地方门户网站系统编辑：程序博客网时间：2024/05/18 15:06

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

Js代码  
style="visibility: none;"  
  
document.getElementById("typediv1").style.visibility="hidden";//隐藏  
  
document.getElementById("typediv1").style.visibility="visible";//显示  

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

Js代码  
style="display: none;"  
  
document.getElementById("typediv1").style.display="none";//隐藏  
  
document.getElementById("typediv1").style.display="";//显示  

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

Js代码  
<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" style="display:none;">出现显示的内容</div> 

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

做两个层之间的切换：

Js代码  
<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代码  
<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>

0 0