按钮控制显示隐藏

最新推荐文章于 2023-06-02 20:32:28 发布

MrsZhaoXiaoShi

最新推荐文章于 2023-06-02 20:32:28 发布

阅读量2.1k

点赞数

分类专栏： JS 文章标签： javascript web

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery实现的点击按钮实现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" 
      > 
     
      #hidden_enent{ 
     
      width:200px; 
     
      height:150px; 
     
      background:#ccc; 
     
      text-align:center; 
     
      line-height:150px; 
     
      } 
     
      </ 
      style 
      > 
     
      < 
      script 
      type 
      = 
      "text/javascript" 
      src 
      = 
      "mytest/jQuery/jquery-1.8.3.js" 
      ></ 
      script 
      >  
     
      < 
      script 
      type 
      = 
      "text/javascript" 
      > 
     
      $(function(){ 
     
      $('#click_event').click(function(){ 
     
      if($('#hidden_enent').is(':hidden')){ 
     
      $('#hidden_enent').show(); 
     
      $('#click_event').val('点击隐藏'); 
     
      } 
     
      else{ 
     
      $('#hidden_enent').hide(); 
     
      $('#click_event').val('点击显示'); 
     
      } 
     
      }) 
     
      }) 
     
      </ 
      script 
      > 
     
      </ 
      head 
      > 
     
      < 
      body 
      > 
     
      < 
      input 
      type 
      = 
      "button" 
      id 
      = 
      "click_event" 
      value 
      = 
      "点击隐藏" 
      /> 
     
      < 
      div 
      id 
      = 
      "hidden_enent" 
      >蚂蚁部落欢迎您</ 
      div 
      > 
     
      </ 
      body 
      > 
     
      </ 
      html 
      >