网站建设资讯

NEWS

网站建设资讯

javascript显示和隐藏div的方法

这篇文章给大家分享的是有关javascript显示和隐藏div的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

金湖ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

javascript显示隐藏div的方法:首先新建文件,并创建button按钮;然后创建隐藏的div,并给div设置隐藏的样式;最后为button按钮添加一个点击后隐藏事件。

javascript显示隐藏div的方法:

1、打开html开发软件,新建一个html文件。如图:

javascript显示和隐藏div的方法

2、在html文件上创建一个button按钮,然后给这个按钮设置一个id,在案例中把按钮的id设置为show。如图:

代码:

javascript显示和隐藏div的方法

3、然后创建一个隐藏的div,把需要隐藏的内容写到这个div上,然后给这个div设置一个id,在案例中设置案例的id为hide。如图:

代码:

我是隐藏的div

javascript显示和隐藏div的方法

4、给div设置隐藏的样式。在标签后面为id为hide设置样式display:none,这个样id为hide的div就会被隐藏掉了。如图:</p><p>样式代码:</p><pre><style> #hide{display: none;padding-top: 15px;} </style></pre><p><img src="/upload/otherpic54/5115.jpg" alt="javascript显示和隐藏div的方法"></p><p>5、为button按钮添加一个点击后隐藏事件。点击button按钮后,把隐藏的div的display修改为block,这样点击后div就会显示了。如图:</p><p>事件代码:</p><pre><script type="text/javascript">  window.onload = function(){ document.getElementById("show").onclick = function(){  document.getElementById("hide").style.display = "block"; }  } </script></pre><p><strong><img src="/upload/otherpic54/5116.jpg" alt="javascript显示和隐藏div的方法"></strong></p><p>感谢各位的阅读!关于“javascript显示和隐藏div的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!</p> <br> 当前名称:javascript显示和隐藏div的方法 <br> 网站地址:<a href="http://www.cdysf.com/article/giijgg.html">http://www.cdysf.com/article/giijgg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dhhsohc.html">Vue.js3.2中UseRouter和UseRoute的用法详解</a> </li><li> <a href="/article/dhhsojp.html">WCF服务行为在实际应用中作用体现</a> </li><li> <a href="/article/dhhsopc.html">Linux常用命令3:让你的工作更高效</a> </li><li> <a href="/article/dhhsdoj.html">服务器拖管idc?(服务器拖管什么意思)</a> </li><li> <a href="/article/dhhsopi.html">选择国外vps有哪些优势</a> </li> </ul> </div> </div> </div> <footer> <div class="footop"> <div class="wrap"> <div class="bottomrpw"> <div class="erp arp"> <dl> <dt>ADDRESS</dt> <dd class="address"> <i class="icon"></i> <span class="word">成都市青羊区锦天国际1号楼1002室</span> </dd> </dl> </div> <div class="erp arp"> <dl> <dt>TEL</dt> <dd class="phonum"> <i class="icon"></i> <span class="word en"> <a href="tel:18980820575">18980820575</a> </span> </dd> </dl> </div> <div class="erp crp"> <dl> <dt>OTHER</dt> <dd> <a class="word get-quote">获得报价与方案</a> </dd> <dd> <a href="#" target="_blank" rel='nofollow' class="word" title="付款方式">付款方式</a> </dd> </dl> </div> <div class="erp code-rp"> <dl> <dt>Wechat</dt> <dd class="code-wrap"> <span class="code"> <img src="/Public/Home/images/qr-code.jpg" alt="创帆新辰微信公众号" /> </span> </dd> </dl> </div> </div> </div> </div> <div class="footerbot"> <div class="friendlinks"> <div class="wrap"> <ul class="rpl"> <li><a href="http://www.zwzsheng.com/" title="成都广告设计" target="_blank">成都广告设计</a></li><li><a href="http://www.wpljqr.com/" title="青白江发电机公司" target="_blank">青白江发电机公司</a></li><li><a href="http://www.gifzqv.com/" title="汽车转向灯销售" target="_blank">汽车转向灯销售</a></li><li><a href="http://www.hbruijie.cn/" title="牛皮纸袋" target="_blank">牛皮纸袋</a></li><li><a href="http://www.doqsx.com/" title="湖北门窗五金" target="_blank">湖北门窗五金</a></li><li><a href="http://www.tvybhd.com/" title="水泥基自流平" target="_blank">水泥基自流平</a></li><li><a href="https://www.cdcxhl.com/zuo/chengdu.html" title="四川成都做网站" target="_blank">四川成都做网站</a></li><li><a href="http://www.sfngh.com/" title="成都画册设计" target="_blank">成都画册设计</a></li><li><a href="http://seo.cdkjz.cn/yingxiao/" title="网站推广公司" target="_blank">网站推广公司</a></li><li><a href="http://www.dcytnm.com/" title="成都发电机租赁" target="_blank">成都发电机租赁</a></li> </ul> </div> </div> <div class="wrap"> <div class="copyright"> <span class="en">©2007-2025</span> 青羊区创帆新辰信息咨询服务部(个体工商户) <span class="en">ALL RIGHTS RESERVED.</span> <a rel="nofollow" href="http://www.miitbeian.gov.cn" target="_blank">蜀ICP备2025128472号</a> </div> </div> </div> </footer> <div class="fcwrap"> <ul class="rpl clearfix"> <li class="phone"> <a rel="nofollow" target="_blank" href="tel:18980820575"> <i class="icon"></i> <strong>18980820575</strong> </a> </li> <li class="qq"> <a rel="nofollow" target="_blank" href="https://wpa.qq.com/msgrd?v=1&uin=244261566&site=qq&menu=yes"> <i class="icon"></i> <strong>244261566</strong> </a> </li> <li class="back-top"> <a href="javascript:void(0)" rel="nofollow" class="back-to-top"> <i class="icon"></i> <strong>回到顶部</strong> </a> </li> </ul> </div> <!--nav--> <div class="n-Wrap"> <div class="navBar visble show"> <div class="barlogo"> <a href="/" rel="nofollow"> <img src="/Public/Home/images/logo1.png" alt="成都做网站" /> <img src="/Public/Home/images/logo2.png" alt="成都网站设计" /> </a> </div> <div class="bmenu"> <i class="bar-top"><span></span></i> <i class="bar-cen"><span></span></i> <i class="bar-bom"><span></span></i> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> </div> <section class="fixmenu"> <div class="close-bar"> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> <nav class="smph"> <ul> <li class="index-hrefs on"><a href="http://www.cdysf.com/"><font>首页</font></a></li> <li><a href="/about/" rel="nofollow"><font>关于我们</font></a></li> <li><a href="/service/" rel="nofollow"><font>网站建设</font></a></li> <li><a href="/case/" rel="nofollow"><font>网站案例</font></a></li> <li><a href="/solve/" rel="nofollow"><font>网站方案</font></a></li> <li><a href="/news/" rel="nofollow"><font>建站知识</font></a></li> <li><a href="/contact/" rel="nofollow"><font>联系创帆新辰</font></a></li> </ul> <div class="pwrap"> <span class="label">建站热线</font> <strong class="phone"><a href="tel:18980820575">18980820575</a></strong> </div> </nav> </section> </div> <!--end nav--> <script src="/Public/Home/js/hotcss.js"></script> <script type="text/javascript" src="/Public/Home/js/su_new.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>