js顯示隱藏DIV

原創 許琴 2018-09-10 04:14

 

  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />    
  4. <script language="JavaScript" type="text/JavaScript">   
  5. <!--   
  6. function toggle(targetid){   
  7.      if (document.getElementById){   
  8.          target=document.getElementById(targetid);   
  9.              if (target.style.display=="block"){   
  10.                  target.style.display="none";   
  11.              } else {   
  12.                  target.style.display="block";   
  13.              }   
  14.      }   
  15. }   
  16. //-->   
  17. </script>   
  18. <style type="text/css">   
  19. <!--   
  20. #div1{   
  21. background-color:#360;   
  22. height:400px;   
  23. width:400px;   
  24. display:none;   
  25. }   
  26. -->   
  27. </style>   
  28. </head>   
  29.    
  30. <body> 
  31. <form> 
  32. <input type="file" id="butn" value="顯示/隱藏" onchange="toggle('div1')" /> 
  33. </form> 
  34. <center>   
  35.     <div id="div1"></div> 
  36. </center>   
  37. 居中的DIV   
  38. </body>   
  39. </html>   

 

 

下面是更多參考資料：

 

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  4. <title>div隱藏與顯示</title> 
  5. <style type=text/css> 
  6. #menus { 
  7.        background-color: #c4cff0;       
  8.       } 
  9. </style> 
  10. <script   language=javascript> 
  11. function Layer_HideOrShow(cur_div) 
  12. { var current=document.getElementById(cur_div); 
  13.    if(current.style.visibility=="hidden") 
  14.      { 
  15.        current.style.visibility ="visible"; 
  16.      } 
  17.    else 
  18.     { 
  19.       current.style.visibility ="hidden"; 
  20.     } 
  21. } 
  22. </script> 
  23. </head> 
  24. <body> 
  25. <p>　</p> 
  26. <table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101"> 
  27. <tr> 
  28.    <td> 
  29.    <a href="#" onclick="Layer_HideOrShow('menus');"><img border="0" src="http://www.shuifutour.com/images/456.gif" width="153" height="25"></a></td> 
  30. </tr> 
  31. <tr> 
  32.    <td> 
  33.    <div id="menus"> 
  34.     <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2"> 
  35.      <tr> 
  36.       <td>　</td> 
  37.      </tr> 
  38.     </table> 
  39.    </div></td> 
  40. </tr> 
  41. </table> 
  42. </body> 
  43. </html> 
  44. ==================== 
  45. <html> 
  46. <head> 
  47. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  48. <title>無標題文檔</title> 
  49. <script language="JavaScript" type="text/JavaScript"> 
  50. <!-- 
  51. function toggle(targetid){ 
  52.      if (document.getElementById){ 
  53.          target=document.getElementById(targetid); 
  54.              if (target.style.display=="block"){ 
  55.                  target.style.display="none"; 
  56.              } else { 
  57.                  target.style.display="block"; 
  58.              } 
  59.      } 
  60. } 
  61. --> 
  62. </script> 
  63. <style type="text/css"> 
  64. <!-- 
  65. #div1{ 
  66. background-color:#000000; 
  67. height:400px; 
  68. width:400px; 
  69. display:none; 
  70. } 
  71. --> 
  72. </style> 
  73. </head> 
  74.  
  75. <body> 
  76. <input type="button" id="butn" value="顯示/隱藏" onclick="toggle('div1')" /> 
  77. <center> 
  78. <div id="div1"></div></center> 
  79. 居中的DIV 
  80. </body> 
  81. </html> 
  82. ======================= 
  83. 3.javascript 控制 html元素 顯示/隱藏 
  84.  
  85. 1。編寫js函數 
  86.  
  87. <script type="text/javascript"> 
  88.  
  89.    function display(id){ 
  90.  
  91.        var traget=document.getElementById(id); 
  92.         if(traget.style.display=="none"){ 
  93.                 traget.style.display=""; 
  94.         }else{ 
  95.                 traget.style.display="none"; 
  96.       } 
  97.    } 
  98. </script> 
  99.  
  100. 2. 要顯示/隱藏的html元素加上 id 屬性 
  101.  
  102. <table> 
  103.  
  104.     <tr id="menu" >    
  105.  
  106.        <td>控制這個tr的顯示/隱藏</td> 
  107.  
  108.    </tr> 
  109.  
  110. </table> 
  111.  
  112. 3，添加按鈕，鏈接等觸發 js 函數 
  113.  
  114. <input type="button" onclick="display('menu')"   value="顯示/隱藏"/> 
  115.  
  116. <a href="#"   onclick="display('menu')"   >顯示/隱藏</a> 
  117.  
  118. javascript顯示隱藏層<div id="" style="display:none;">廣告</div> 
  119. <input type="botton" onclick="函數"> 
  120.  
  121. <script language=javascript> 
  122. function 函數{ 
  123. if(thisdiv.style.display=='none'){  
  124. thisdiv.style.display="" 
  125. } 
  126. else 
  127. thisdiv.style.display="none" 
  128. } 
  129.  
  130. </script>你先給div 取個ID=“AA”thisdiv=AA 
  131.  
  132. javascript隱藏/顯示錶單對象 
  133. javascript隱藏/顯示錶單對象  
  134. [SCRIPT language=JavaScript] 
  135. function expandIt(el) { 
  136.      whichEl =document.getElementById(el) 
  137.      if (whichEl.style.display ==   'none') { 
  138.       whichEl.style.display   = ''; 
  139.      } 
  140.      else { 
  141.       whichEl.style.display   = 'none'; 
  142.      } 
  143.      } 
  144.    
  145. [/SCRIPT] 
  146.  
  147. el是對象的id，不管是tr或者table等等先設置一下id，然後進行調用。 
  148.  
  149. 例： 
  150.  
  151. [a onclick="expandIt('ttchild'); return false" href="#" ]try it[/a] 
  152.  
  153. [tr id="ttchild"][td width="18"]Example[/td][/tr] 
  154.  
  155. 使用時把[]變成<> 
  156.  
  157. javascript控制頁面控件隱藏顯示的兩種方法 
  158.  
  159. javascript控制頁面控件隱藏顯示的兩種方法，方法的不同之處在於控件隱藏後是否還在頁面上佔位 
  160. 方法一： 
  161. document.all["PanelSMS"].style.visibility="hidden";  
  162. document.all["PanelSMS"].style.visibility="visible"; 
  163. 方法二： 
  164. document.all["PanelSMS"].style.display="none";  
  165. document.all["PanelSMS"].style.display="inline"; 
  166. 方法一隱藏後 頁面的位置還被控件佔用 只是不顯示 類似於.net驗證控件的Display=Static 
  167. 方法二隱藏後 頁面的位置不被佔用 類似於.net驗證控件的Display=Dynamic 
  168.  
  169.  
  170.  
  171.  
  172.  
  173. ==================== 
  174.  
  175. 這個方法來我是從一個boblog模板上找到的，其實網絡上也可以搜索到；只是網絡上不看效果的轉載讓人難辯代碼的錯對和方便。用這個方法比用《給zblog再增3個功能：防刷、收縮側欄、複製加版權》的效果要好，純css隱藏div會刷新頁面，但用js就不會了。 
  176.  
  177. 　　js代碼如下，新建一個txt文件，複製進去，保存並修改文件後綴爲js（例open.js）即可。我是把這個文件放在zblog的SCRIPT文件夾裏，這裏js比較多…… 
  178.  
  179.  程序代碼function showhidediv(id){ 
  180.    try{ 
  181.      var sbtitle=document.getElementById(id); 
  182.      if(sbtitle){ 
  183.        if(sbtitle.style.display=='block'){ 
  184.          sbtitle.style.display='none'; 
  185.        }else{ 
  186.          sbtitle.style.display='block'; 
  187.        } 
  188.      } 
  189.    }catch(e){} 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

教你如何隱藏windows系統賬戶

幽鳴草 2019-02-23 13:28:10

windows server 2008 R2 域中用組策略隱藏指定磁盤驅動器(盤符)

allen2424 2019-02-23 00:31:39

個人空間

dqf1989 2019-02-23 00:42:19

第二十二章：動畫（四）

wangccsy 2019-02-24 10:57:10

json

yi_sixian 2019-02-23 14:02:01

html2canvas實現保存網頁爲圖片，canvas2image解決圖片模糊問題

wx5c6f5798d627c 2019-02-23 13:07:16

序列化表單爲Json對象

liudajiang 2019-02-23 12:53:51

Console.log 的兼容性

liudajiang 2019-02-23 12:53:51

對frameset、frame、iframe的js操作

dyfhyf 2019-02-23 00:32:13

零基礎實現網易雲音樂播放器（3）

麪包理想 2019-02-23 00:25:45

jQuery.validate.js API

weiyongliang813 2019-02-23 00:25:04

JS推送指定欄目摺疊效果（實例）

super748 2019-02-23 00:23:46

圖片懶加載

motouzhixin 2019-02-23 00:20:39

js正則表達式

kouxiaomou 2019-02-23 00:20:05

JS的正則表達式

gloriavivi 2019-02-23 00:39:47