通过按钮实现隐藏与显示
先看下效果:
1、点击前:
2、点击后:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过按钮实现隐藏和显示</title> <style> .body { margin: 0 auto; } #show { width: 600px; height: auto; font-size: 14px; background-color: #e4c392; display: block; padding: 10px; margin: 0 auto; border-radius: 10px; } #show h1 { color: #11c2ee; margin: 0 auto; } .slide { margin: 0 auto; padding: 0; width: 600px; border-top: solid 4px #D6A55C; } .btn-slide { background-color: bisque; width: 80px; height: 30px; text-align: center; margin: 0 auto; border-radius: 8px; margin: 0 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> </head> <body> <div id="show"> <h1>段落</h1> <p>段落是文章中最基本的单位。内容上它具有一个相对完整的意思;在文章中,段具有换行的标。段是由句子或句群组成的,在文章中用于体现作者的思路发展或全篇文章的层次。有的段落只有一个句子,称为独句段,独句段一般是文章的开头段、结尾段、过渡段强调段等特殊的段落。多数段落包括不止一个句子或句群,叫多句段。中文段落开头前一般空两个格。 段落也常用于日常用语中。例:"现在的工作告一段落",表示达到一定程度暂停的意思。 </p> <div id="btnshow" style="display: none;"> <p>段落是文章中最基本的单位。内容上它具有一个相对完整的意思;在文章中,段具有换行的标。段是由句子或句群组成的,在文章中用于体现作者的思路发展或全篇文章的层次。有的段落只有一个句子,称为独句段,独句段一般是文章的开头段、结尾段、过渡段强调段等特殊的段落。多数段落包括不止一个句子或句群,叫多句段。中文段落开头前一般空两个格。 段落也常用于日常用语中。例:"现在的工作告一段落",表示达到一定程度暂停的意思。 </p> </div> </div> <p class="slide"> <a href="javascript:divshow()" id="btnhref" class="btn-slide">了解</a> </p> </body> </html>
通过getElementById()这个方法找到对应元素,进而控制它的style,以此来做对应的功能。