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. </script> 
  22. </head> 
  23. <body> 
  24. <p> </p> 
  25. <table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101"> 
  26. <tr> 
  27.    <td> 
  28.    <a href="#" onclick="Layer_HideOrShow('menus');"><img border="0" src="http://www.shuifutour.com/images/456.gif" width="153" height="25"></a></td> 
  29. </tr> 
  30. <tr> 
  31.    <td> 
  32.    <div id="menus"> 
  33.     <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2"> 
  34.      <tr> 
  35.       <td> </td> 
  36.      </tr> 
  37.     </table> 
  38.    </div></td> 
  39. </tr> 
  40. </table> 
  41. </body> 
  42. </html> 
  43. ==================== 
  44. <html> 
  45. <head> 
  46. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  47. <title>无标题文档</title> 
  48. <script language="JavaScript" type="text/JavaScript"> 
  49. <!-- 
  50. function toggle(targetid){ 
  51.      if (document.getElementById){ 
  52.          target=document.getElementById(targetid); 
  53.              if (target.style.display=="block"){ 
  54.                  target.style.display="none"
  55.              } else { 
  56.                  target.style.display="block"
  57.              } 
  58.      } 
  59. --> 
  60. </script> 
  61. <style type="text/css"> 
  62. <!-- 
  63. #div1{ 
  64. background-color:#000000; 
  65. height:400px; 
  66. width:400px; 
  67. display:none; 
  68. --> 
  69. </style> 
  70. </head> 
  71.  
  72. <body> 
  73. <input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" /> 
  74. <center> 
  75. <div id="div1"></div></center> 
  76. 居中的DIV 
  77. </body> 
  78. </html> 
  79. ======================= 
  80. 3.javascript 控制 html元素 显示/隐藏 
  81.  
  82. 1。编写js函数 
  83.  
  84. <script type="text/javascript"> 
  85.  
  86.    function display(id){ 
  87.  
  88.        var traget=document.getElementById(id); 
  89.         if(traget.style.display=="none"){ 
  90.                 traget.style.display=""
  91.         }else{ 
  92.                 traget.style.display="none"
  93.       } 
  94.    } 
  95. </script> 
  96.  
  97. 2. 要显示/隐藏的html元素加上 id 属性 
  98.  
  99. <table> 
  100.  
  101.     <tr id="menu" >    
  102.  
  103.        <td>控制这个tr的显示/隐藏</td> 
  104.  
  105.    </tr> 
  106.  
  107. </table> 
  108.  
  109. 3,添加按钮,链接等触发 js 函数 
  110.  
  111. <input type="button" onclick="display('menu')"   value="显示/隐藏"/> 
  112.  
  113. <a href="#"   onclick="display('menu')"   >显示/隐藏</a> 
  114.  
  115. javascript显示隐藏层<div id="" style="display:none;">广告</div> 
  116. <input type="botton" onclick="函数"> 
  117.  
  118. <script language=javascript> 
  119. function 函数{ 
  120. if(thisdiv.style.display=='none'){  
  121. thisdiv.style.display="" 
  122. else 
  123. thisdiv.style.display="none" 
  124.  
  125. </script>你先给div 取个ID=“AA”thisdiv=AA 
  126.  
  127. javascript隐藏/显示表单对象 
  128. javascript隐藏/显示表单对象  
  129. [SCRIPT language=JavaScript
  130. function expandIt(el) { 
  131.      whichEl =document.getElementById(el) 
  132.      if (whichEl.style.display ==   'none') { 
  133.       whichEl.style.display   = ''
  134.      } 
  135.      else { 
  136.       whichEl.style.display   = 'none'
  137.      } 
  138.      } 
  139.    
  140. [/SCRIPT] 
  141.  
  142. el是对象的id,不管是tr或者table等等先设置一下id,然后进行调用。 
  143.  
  144. 例: 
  145.  
  146. [a onclick="expandIt('ttchild'); return false" href="#" ]try it[/a] 
  147.  
  148. [tr id="ttchild"][td width="18"]Example[/td][/tr] 
  149.  
  150. 使用时把[]变成<> 
  151.  
  152. javascript控制页面控件隐藏显示的两种方法 
  153.  
  154. javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 
  155. 方法一: 
  156. document.all["PanelSMS"].style.visibility="hidden";  
  157. document.all["PanelSMS"].style.visibility="visible"
  158. 方法二: 
  159. document.all["PanelSMS"].style.display="none";  
  160. document.all["PanelSMS"].style.display="inline"
  161. 方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static 
  162. 方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic 
  163.  
  164.  
  165.  
  166.  
  167.  
  168. ==================== 
  169.  
  170. 这个方法来我是从一个boblog模板上找到的,其实网络上也可以搜索到;只是网络上不看效果的转载让人难辩代码的错对和方便。用这个方法比用《给zblog再增3个功能:防刷、收缩侧栏、复制加版权》的效果要好,纯css隐藏div会刷新页面,但用js就不会了。 
  171.  
  172.   js代码如下,新建一个txt文件,复制进去,保存并修改文件后缀为js(例open.js)即可。我是把这个文件放在zblog的SCRIPT文件夹里,这里js比较多…… 
  173.  
  174.  程序代码function showhidediv(id){ 
  175.    try{ 
  176.      var sbtitle=document.getElementById(id); 
  177.      if(sbtitle){ 
  178.        if(sbtitle.style.display=='block'){ 
  179.          sbtitle.style.display='none'
  180.        }else{ 
  181.          sbtitle.style.display='block'
  182.        } 
  183.      } 
  184.    }catch(e){} 

 


      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/939481,如需转载请自行联系原作者




相关文章
|
2月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
8月前
|
JavaScript
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
93 0
|
JavaScript
JS实现定时自动更换DIV或页面背景图片
JS实现定时自动更换DIV或页面背景图片
217 0
|
2月前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
24 3
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
50 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
35 0
|
2月前
|
JavaScript
原生js实现div跳动效果---很多炫酷效果的基本原理
原生js实现div跳动效果---很多炫酷效果的基本原理
25 0
|
2月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
59 0
|
2月前
|
JavaScript 前端开发
js小功能--如何实现按住shift拖拽多选div
js小功能--如何实现按住shift拖拽多选div
57 0
|
2月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动