查看: 1972|回復: 0

[JavaScript/JQuery] 如何用JavaScript(js)隱藏div和顯示div

3萬

主題

3萬

帖子

10萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
100197
發表于 2016-11-8 15:07:47
如何用JavaScript(js)隱藏div和顯示div?

1.div的visibility可以控制div的顯示和隱藏,但是隱藏后頁面顯示空白
  1. style="visibility: none;"

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

  3. document.getElementById("typediv1").style.visibility="visible";//顯示
復制代碼
2.通過設置display屬性可以使div隱藏后釋放占用的頁面空間如下
  1. style="display: none;"

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

  3. document.getElementById("typediv1").style.display="";//顯示
復制代碼
此JS代碼中,沒有用try——Catch捕獲錯誤,代碼如下:
  1. <script language="javascript">
  2. //創建一個showhidediv的方法,直接跟ID屬性
  3. function showhidediv(id){
  4. var sbtitle=document.getElementById(id);
  5. if(sbtitle){
  6.    if(sbtitle.style.display=='block'){
  7.    sbtitle.style.display='none';
  8.    }else{
  9.    sbtitle.style.display='block';
  10.    }
  11. }
  12. }
  13. </script>
復制代碼

<div id="show" onMouseMove='showhidediv("msg")';>鼠標移動這里</div><!--這里是點擊div,ID要下面的ID-->
<div id="msg" style="display:none;">出現顯示的內容</div> <!--這里是MsgDiv-->

onMouseMove='showhidediv("msg")'; 這里是鼠標動作,可以替換成Click或其他!

做兩個層之間的切換:
  1. <script language="javascript">
  2. //創建一個showhidediv的方法,直接跟ID屬性
  3. function showhidediv(id){
  4. var age=document.getElementById("msg_2");
  5. var name=document.getElementById("msg_1");
  6. if (id == 'name') {
  7.    if (name.style.display=='none') {
  8.     age.style.display='none';
  9.     name.style.display='block';
  10.    }
  11. } else {
  12.    if (age.style.display=='none') {
  13.     name.style.display='none';
  14.     age.style.display='block';
  15.    }
  16. }   
  17. }
  18. </script>
  19. <div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age:</div>
  20. <div id="msg_1" style="display:none;float:left;">林雨林</div>
  21. <div id="msg_2" style="display:none;float:left;">18</div>
復制代碼

//示例二

顯示一個層的同時隱藏另一個層
  1. <html>

  2. <head>

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

  4. <title>無標題文檔</title>

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

  6. <!--

  7. function showhidediv(id){

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

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

  10. if (id == 'name') {

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

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

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

  14.    }

  15. } else {

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

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

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

  19.    }

  20. }   

  21. }

  22. -->

  23. </script>

  24. </script>

  25. </head>

  26. <body>

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

  28. <p id="photoTitle" >單擊此處添加描述</p></div>

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

  30. <form id="">

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

  32. <div class="">

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

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

  35. </div>

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

  37. </div>

  38. </body>

  39. </html>
復制代碼



回復

使用道具 舉報