JS实现点击按钮显示或隐藏DIV内容

2024-09-06 12:41:15

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了JS实现点击按钮显示或隐藏DIV内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

JS实现点击按钮显示或隐藏DIV内容，这是一种常用的效果，我们先来看看大概效果，如下图：

JS实现点击按钮显示或隐藏DIV内容

JS实现点击按钮显示或隐藏DIV内容一

JS实现点击按钮显示或隐藏DIV内容

JS实现点击按钮显示或隐藏DIV内容二

通过上面的2张图片，大家应该可以看出通过点击可以把隐藏在DIV里的内容显示出来，再次点击又隐藏起来，具体的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>通过JS实现点击按钮显示或隐藏DIV中的内容-Javascript-361模板网</title><style type="text/css">.body {    margin: 0 auto;}.box {    width: 600px;    height: auto;    font-size: 14px;    background-color: #ccc;    display: block;    padding: 10px;    margin: 0 auto;    border-radius: 10px;}.slide {    margin: 0 auto;    padding: 0;    width: 600px;}.btn-slide {    background-color: #ccc;    width: 80px;    height: 30px;    line-height: 30px;    text-align: center;    margin: 0 auto;    border-radius: 5px;    margin: 10px auto;    display: block;}</style><script type="text/javascript">function divShow(){document.getElementById("btnshow").style.display="block";document.getElementById("btnhref").innerHTML ="隐藏";document.getElementById("btnhref").href ="javascript:divhidden()";}function divhidden(){document.getElementById("btnshow").style.display="none";document.getElementById("btnhref").innerHTML ="查看更多";document.getElementById("btnhref").href ="javascript:divShow()";}</script></head><body><div class="box">  <h2>通过JS实现点击按钮显示或隐藏DIV中的内容</h2>  <hr />  <p> 欢迎访问武林网（WWW.Vevb.COM）网站！ </p>  <p> 武林网为您提供DEDECMS、帝国CMS、PHPCMS、DISCUZ、ECSHOP、WORDPRESS等各种内容管理、论坛、商城系统的教程及模板，在这里您一定能找到想要学习的知识！ </p>  <div id="btnshow" style="display: none;">    <p> 如有建站、仿站、模板修改、技术咨询等需求请加 QQ:64882881 详谈！ </p>    <p> 我们是一个拥有多年建站经验的团队！ </p>  </div></div><p class="slide"> <a href="javascript:divShow();" id="btnhref" class="btn-slide">查看更多</a> </p></body></html>

查看演示效果

以上就是JS实现点击按钮显示或隐藏DIV内容的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持武林网。

上一篇：JS和onclick事件实现关闭DIV层操作实例

下一篇：JS禁止右键代码