中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js顯示和隱藏DIV的方法

發布時間：2020-05-09 18:30:12 來源：億速云 閱讀：306 作者：Leah 欄目：web開發

這篇文章主要為大家詳細介紹了js顯示和隱藏DIV的方法，文中示例代碼介紹的非常詳細，圖文詳解容易學習，非常適合初學者入門，感興趣的小伙伴們可以參考一下。

  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="https://cache.yisu.com/upload/information/20200311/54/212284.jpg" 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=&ldquo;AA&rdquo;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比較多&hellip;&hellip; 
  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){} 

看完上訴內容，你們掌握js顯示和隱藏DIV的方法了嗎？如果想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
鄂伦春自治旗| 调兵山市| 宜丰县| 宣恩县| 邵阳县| 徐水县| 舟曲县| 扶风县| 阿坝县| 休宁县| 淳化县| 淮阳县| 银川市| 池州市| 泸州市| 沁水县| 南平市| 南充市| 玉田县| 松阳县| 美姑县| 鸡泽县| 寿光市| 文山县| 班玛县| 延川县| 洛南县| 甘谷县| 西乡县| 晋宁县| 通江县| 隆回县| 农安县| 叶城县| 全州县| 靖安县| 凤山市| 红安县| 峨边| 当阳市| 德令哈市|