JS 展开/收起按钮显示隐藏文字示例

前端之家收集整理的这篇文章主要介绍了JS 展开/收起按钮显示隐藏文字示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣JS 展开/收起按钮显示隐藏文字示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。<br>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. *{padding:0;margin: 0;}
  8. .pn{width:400px; margin: 200px auto 0; background-color: #ddd; text-align: center;padding:0 100px;}
  9. .slide a{display: block;width: 100px;height: 30px;line-height:30px; text-align:center;margin:0 auto;background-color: #f00; text-decoration: none;color:#fff;}
  10. </style>
  11. </head>
  12. <body>
  13. <div class="pn">
  14. <p>简介</p>
  15. <p>女娃</p>
  16. <div class="hpn" id="mm" style="display:none;">
  17. <p>特点:人长得很特很特点</p>
  18. <p>爱好:看电影睡觉爬山</p>
  19. </div>
  20. </div>
  21. <p class="slide"><a href="javascript:showdiv();" id="strhref" class="btn-show">展开</a></p>
  22. <script type="text/javascript">
  23. function showdiv(){
  24. document.getElementById('mm').style.display = 'block';
  25. document.getElementById('strhref').innerHTML="收起";
  26. document.getElementById('strhref').href="javascript:hidediv()";
  27. }
  28. function hidediv(){
  29. document.getElementById('mm').style.display = 'none';
  30. document.getElementById('strhref').innerHTML="展开";
  31. document.getElementById('strhref').href="javascript:showdiv()";
  32. }
  33. </script>
  34. </body>
  35. </html>
 

猜你在找的JavaScript相关文章