利用JS作到隱藏div和顯示div

時間 2019-11-18

原文原文鏈接

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" >出現顯示的內容</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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。