[事件处理] 点击同一按钮实现div的隐藏与显示切换

最新推荐文章于 2024-04-11 05:37:43 发布

kingmax54212008

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量1w

点赞数

文章标签： html Jquery

本文介绍了一种使用jQuery实现点击按钮切换DIV显示与隐藏的方法。通过toggle函数控制元素的显示状态，并更新按钮文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击同一按钮实现div的隐藏与现实切换:
在很多应用中，都有这样的功能，点击同一个按钮可以实现div的隐藏或者现实，当然操作的并非必须是按钮或者div，不过原理是一样的，下面就通过代码实例介绍一下如何实现此功能。
代码如下:

[HTML] 纯文本查看复制代码运行代码

 
         <!DOCTYPE html>
        
         <
         html
         >
        
         <
         head
         >
        
         <
         meta 
          charset
         =
         " utf-8"
         >
        
         <
         meta 
          name
         =
         "author" 
          content
         =
         "http://www.softwhy.com/" 
          />
        
         <
         title
         >蚂蚁部落</
         title
         >
        
         <
         style 
          type
         =
         "text/css"
         >
        
         #thediv{
        
         width:250px;
        
         height:50px;
        
         background-color:red;
        
         }
        
         </
         style
         >
        
         <
         script 
          type
         =
         "text/javascript" 
          src
         =
         "mytest/jQuery/jquery-1.8.3.js"
         ></
         script
         >
        
         <
         script 
          type
         =
         "text/javascript"
         > 
        
         $(document).ready(function(){ 
        
         $("#bt").toggle(function(){
        
         $("#thediv").hide()
        
         $("#bt").val("点击显示"); 
        
         },function(){
        
         $("#thediv").show()
        
         $("#bt").val("点击隐藏");
        
         })   
        
         }); 
        
         </
         script
         >
        
         </
         head
         >
        
         <
         body
         >
        
         <
         div 
          id
         =
         "thediv"
         ></
         div
         >
        
         <
         input 
          type
         =
         "button" 
          id
         =
         "bt" 
          value
         =
         "点击隐藏"
         />
        
         </
         body
         >
        
         </
         html
         >

以上代码可以实现我们想要的效果，这里主要利用了toggle()函数。
特别说明: toggle()函数已经在jQuery1.9中被删除。
相关阅读:
1.toggle()函数可以参阅 jQuery的toggle()方法一章节。
2.hide()函数可以参阅 jQuery的hide()方法一章节。
3.val()函数可以参阅 jQuery的val()方法一章节。
4.show()函数可以参阅 jQuery的show()方法一章节。