温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js显示和隐藏DIV的方法

发布时间:2020-05-09 18:30:12 阅读:328 作者:Leah 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要为大家详细介绍了js显示和隐藏DIV的方法,文中示例代码介绍的非常详细,图文详解容易学习,非常适合初学者入门,感兴趣的小伙伴们可以参考一下。

<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=GBK" />    <script language="JavaScript" type="text/JavaScript">   <!--   function toggle(targetid){        if (document.getElementById){            target=document.getElementById(targetid);                if (target.style.display=="block"){                    target.style.display="none";                } else {                    target.style.display="block";                }        }   }   //-->   </script>   <style type="text/css">   <!--   #div1{   background-color:#360;   height:400px;   width:400px;   display:none;   }   -->   </style>   </head>      <body> <form> <input type="file" id="butn" value="显示/隐藏" onchange="toggle('div1')" /> </form> <center>       <div id="div1"></div> </center>   居中的DIV   </body>   </html>   

下面是更多参考资料:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>div隐藏与显示</title> <style type=text/css> #menus {        background-color#c4cff0;             } </style> <script   language=javascript> function Layer_HideOrShow(cur_div) { var current=document.getElementById(cur_div);    if(current.style.visibility=="hidden")      {        current.style.visibility ="visible";      }    else     {       current.style.visibility ="hidden";     } } </script> </head> <body> <p> </p> <table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101"> <tr>    <td>    <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> </tr> <tr>    <td>    <div id="menus">     <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2">      <tr>       <td> </td>      </tr>     </table>    </div></td> </tr> </table> </body> </html> ==================== <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="JavaScript" type="text/JavaScript"> <!-- function toggle(targetid){      if (document.getElementById){          target=document.getElementById(targetid);              if (target.style.display=="block"){                  target.style.display="none";              } else {                  target.style.display="block";              }      } } --> </script> <style type="text/css"> <!-- #div1{ background-color:#000000; height:400px; width:400px; display:none; } --> </style> </head>  <body> <input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" /> <center> <div id="div1"></div></center> 居中的DIV </body> </html> ======================= 3.javascript 控制 html元素 显示/隐藏  1。编写js函数  <script type="text/javascript">     function display(id){         var traget=document.getElementById(id);         if(traget.style.display=="none"){                 traget.style.display="";         }else{                 traget.style.display="none";       }    } </script>  2. 要显示/隐藏的html元素加上 id 属性  <table>      <tr id="menu" >            <td>控制这个tr的显示/隐藏</td>     </tr>  </table>  3,添加按钮,链接等触发 js 函数  <input type="button" onclick="display('menu')"   value="显示/隐藏"/>  <a href="#"   onclick="display('menu')"   >显示/隐藏</a>  javascript显示隐藏层<div id="" style="display:none;">广告</div> <input type="botton" onclick="函数">  <script language=javascript> function 函数{ if(thisdiv.style.display=='none'){  thisdiv.style.display="" } else thisdiv.style.display="none" }  </script>你先给div 取个ID=&ldquo;AA&rdquo;thisdiv=AA  javascript隐藏/显示表单对象 javascript隐藏/显示表单对象  [SCRIPT language=JavaScript] function expandIt(el) {      whichEl =document.getElementById(el)      if (whichEl.style.display ==   'none') {       whichEl.style.display   = '';      }      else {       whichEl.style.display   = 'none';      }      }    [/SCRIPT]  el是对象的id,不管是tr或者table等等先设置一下id,然后进行调用。  例:  [a onclick="expandIt('ttchild'); return false" href="#" ]try it[/a]  [tr id="ttchild"][td width="18"]Example[/td][/tr]  使用时把[]变成<>  javascript控制页面控件隐藏显示的两种方法  javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: document.all["PanelSMS"].style.visibility="hidden";  document.all["PanelSMS"].style.visibility="visible"; 方法二: document.all["PanelSMS"].style.display="none";  document.all["PanelSMS"].style.display="inline"; 方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static 方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic      ====================  这个方法来我是从一个boblog模板上找到的,其实网络上也可以搜索到;只是网络上不看效果的转载让人难辩代码的错对和方便。用这个方法比用《给zblog再增3个功能:防刷、收缩侧栏、复制加版权》的效果要好,纯css隐藏div会刷新页面,但用js就不会了。    js代码如下,新建一个txt文件,复制进去,保存并修改文件后缀为js(例open.js)即可。我是把这个文件放在zblog的SCRIPT文件夹里,这里js比较多&hellip;&hellip;   程序代码function showhidediv(id){    try{      var sbtitle=document.getElementById(id);      if(sbtitle){        if(sbtitle.style.display=='block'){          sbtitle.style.display='none';        }else{          sbtitle.style.display='block';        }      }    }catch(e){} 

看完上诉内容,你们掌握js显示和隐藏DIV的方法了吗?如果想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×