JS实现“隐藏与显示”功能(多种方法)

最新推荐文章于 2024-08-13 08:52:29 发布

ayiewu460246

最新推荐文章于 2024-08-13 08:52:29 发布

阅读量3.4k

点赞数

文章标签： javascript xhtml 设计模式 ViewUI

原文链接：http://www.cnblogs.com/lsongyang/p/10156678.html

版权

本文介绍了三种使用JavaScript实现元素隐藏与显示的方法，包括通过按钮控制、时间限制控制和jQuery的slideToggle()方法。同时，文章还提到了nextSibling和previousSibling属性在页面元素操作中的应用。

摘要由CSDN通过智能技术生成

1，通过按钮实现隐藏与显示：

这个是通过按钮点击实现的隐藏与显示，具体代码如下：

 
          <!DOCTYPE html> 
         
          <html> 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>通过按钮实现隐藏和显示</title> 
         
          <style type= 
          "text/css" 
          > 
         
          .body{
            
          margin: 0 auto; 
         
          } 
         
          #show{
            
          width: 600px; 
         
          height: auto; 
         
          font-size: 14px; 
         
           padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#E4C392; 
         
          display: block; 
         
          padding: 10px; 
         
          margin: 0 auto; 
         
          border-radius: 10px; 
         
          } 
         
          #show h2{
            
          color: 
          #11C2EE; 
         
          margin: 0 auto; 
         
          } 
         
          .slide{
            
          margin: 0 auto; 
         
          padding: 0; 
         
          width: 600px; 
         
          border-top: solid 4px 
          #D6A55C; 
         
          } 
         
          .btn-slide{
            
          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> 
         
          <body> 
         
          <div id= 
          "show" 
          > 
         
          <h2>通过点击按钮实现隐藏和显示</h2> 
         
          <hr /> 
         
          <p> 
         
          欢迎来到我的博客Jaxzm! 
         
          </p> 
         
          <p> 
         
          目前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。 
         
          </p> 
         
          <div id= 
          "btnshow" 
          style= 
          "display: none;" 
          > 
         
          <p> 
         
          GoF所描述的23种设计模式，总共可以分为三种类型：创建型模式，行为型模式，结构型模式。 
         
          </p> 
         
          <p> 
         
          我觉得比较难的是创建型模式，因为它说的比较抽象，所以我不容易理解它，然后我编码也比较少，所以就不太容易理解这个。 
         
          </p> 
         
          </div> 
         
          </div> 
         
          <p class= 
          "slide" 
          > 
         
          <a href= 
          "javascript:divShow();" 
          id=