JavaScript点击一个按钮隐藏和显示div

最新推荐文章于 2022-07-22 20:12:27 发布
最新推荐文章于 2022-07-22 20:12:27 发布
阅读量3w 收藏 17
点赞数 6
分类专栏： 前端js

本章节通过代码实例介绍一下如何实现点击同一按钮实现一个元素的显示和隐藏效果。

此效果还是比较实用的，比如点击按钮可以实现一个功能模块的显示或者隐藏。

下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

     
     

      
      

       
       

        
        
 
            

              01 
            
 
            

              02 
            
 
            

              03 
            
 
            

              04 
            
 
            

              05 
            
 
            

              06 
            
 
            

              07 
            
 
            

              08 
            
 
            

              09 
            
 
            

              10 
            
 
            

              11 
            
 
            

              12 
            
 
            

              13 
            
 
            

              14 
            
 
            

              15 
            
 
            

              16 
            
 
            

              17 
            
 
            

              18 
            
 
            

              19 
            
 
            

              20 
            
 
            

              21 
            
 
            

              22 
            
 
            

              23 
            
 
            

              24 
            
 
            

              25 
            
 
            

              26 
            
 
            

              27 
            
 
            

              28 
            
 
            

              29 
            
 
            

              30 
            
 
            

              31 
            
 
            

              32 
            
 
            

              33 
            
 
            

              34 
            
 
            
 
             
 
              <!DOCTYPE html> 
             
 
             
 
              < 
              html 
              > 
             
 
             
 
              < 
              head 
              > 
             
 
             
 
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
             
 
             
 
              < 
              title 
              >点击一个按钮隐藏和显示div</ 
              title 
              > 
             
 
             
 
              < 
              style  
              type 
              = 
              "text/css" 
              > 
             
 
             
 
              #thediv{ 
             
 
             
 
                 
              width:200px; 
             
 
             
 
                 
              height:50px; 
             
 
             
 
                 
              background:#ccc; 
             
 
             
 
              } 
             
 
             
 
              </ 
              style 
              > 
             
 
             
 
              < 
              script  
              type 
              = 
              "text/javascript" 
              > 
             
 
             
 
              window.onload=function(){ 
             
 
             
 
                 
              var obt=document.getElementById("bt"); 
             
 
             
 
                 
              var odiv=document.getElementById("thediv"); 
             
 
             
 
                 
              obt.onclick=function(){ 
             
 
             
 
                   
              if(odiv.style.display=="none"){ 
             
 
             
 
                     
              odiv.style.display="block"; 
             
 
             
 
                     
              obt.value="隐藏模块"; 
             
 
             
 
                   
              } 
             
 
             
 
                   
              else{ 
             
 
             
 
                     
              odiv.style.display="none"; 
             
 
             
 
                     
              obt.value="显示模块"; 
             
 
             
 
                   
              } 
             
 
             
 
                 
              } 
             
 
             
 
              } 
             
 
             
 
              </ 
              script 
              > 
             
 
             
 
              < 
              body 
              > 
             
 
             
 
              < 
              input  
              type 
              = 
              "button"  
              id 
              = 
              "bt"  
              value 
              = 
              "显示模块" 
              /> 
             
 
             
 
              < 
              div  
              id 
              = 
              "thediv"  
              style 
              = 
              "display:none" 
              ></ 
              div 
              > 
             
 
             
 
              </ 
              body 
              > 
             
 
             
 
              </ 
              html 
              >

上面的代码实现了我们的要求，点击按钮可以实现切换效果。


Return_KB
关注
  • 6
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
易语言-易语言超级模块9.0开源
07-02
' 新增大漠类,已添加注释并将调用方式同步至最新版 ' 修改验证地址:超级模块官方网址修改为    三大不留.sheiben.康姆 ' 增加“自动侧边隐藏窗口”，窗口靠边时，智能隐藏窗口，智能前台显示。 ' 增加“自动弹出侧边窗口”，窗口靠边隐藏时，自动弹出显示窗口，鼠标再次经过窗口并离开时才会再次隐藏。 ' 增加“取任务栏高度”，取系统任务栏高度。 ' 修改"关闭系统"为"关闭操作系统",解决与支持库命令冲突的问题   (感谢会员"rszhao"提交建议) ' 修改"释放内存"为"释放内存数据",解决与支持库命令冲突的问题   (感谢会员"raomengkai"提交建议) ' 修正"高效位图操作类"中"输出到屏幕",句柄未释放导致内存不断增加的BUG   (感谢会员"niepan"提交BUG) ' 修正"WinIo类"调用时提示参数太少的BUG   (感谢会员"这殇丶流星雨"提交BUG) ' 改进"DLL类"中"动态调用库函数",增加可空参数"是否C调用" ' 公开"网页填表类"中"多行文本框_取对象" ' 增加"网页填表类"中一些通用命令: ' "取属性","置属性","取源码","取文本","置文本","取内容","置内容","取名称","取text","置焦点","置可视状态","置选中状态","取现行选择项","选择项目","取表格行数","取表格列数","点击" ' 改进"网页填表类"及"网页文档类"中,"初始化"命令,支持易语言超文本浏览框的初始化   (感谢会员"小鱼"提交BUG) ' 增加"网页填表类"中,采用元素语句来方便操作的相关命令,命令如下:   (感谢会员"yyjpcx"提交建议) ' 通过条件语句获取元素对象:"取元素对象_文本框","取元素对象_多行文本框","取元素对象_单选框","取元素对象_复选框","取元素对象_按钮","取元素对象_高级按钮","取元素对象_图形按钮" ' "取元素对象_链接","取元素对象_图片","取元素对象_组合框","取元素对象_表格","取元素对象_表单","取元素对象_隐藏表单","取元素对象_DIV","取元素对象_LI","取元素对象_SPAN" ' 针对元素对象进行读写操作:"读元素","写元素" ' 通过条件语句读取元素内容:"文本框_读元素","多行文本框_读元素","单选框_读元素","复选框_读元素","按钮_读元素","高级按钮_读元素","图形按钮_读元素","链接_读元素","图片_读元素" ' "组合框_读元素","表格_读元素","表单_读元素","隐藏表单_读元素","DIV_读元素","ULLI_读元素","SPAN_读元素" ' 通过条件语句与元素语句,操作或写元素内容:"文本框_写元素","多行文本框_写元素","单选框_写元素","复选框_写元素","按钮_写元素","高级按钮_写元素","图形按钮_写元素","链接_写元素" ' "图片_写元素","组合框_写元素","表格_写元素","表单_写元素","隐藏表单_写元素","DIV_写元素","ULLI_写元素","SPAN_写元素" ' [条件语句]：用于判断对象的条件,以半角分号分开,如:"innerText=小烦;id=ccc;2" ' 其中有三个条件：第一个条件"innerText"属性值等于"小烦"；第二个条件"id"值等于"ccc"；第三个条件数值(即不含等号的被视为索引值),索引值默认为0开始,2表示第二个符合条件的对象 ' [元素语句]：用于写元素时使用的参数,与条件语句的语法类似, ' 上面有三个属性：论坛不许发带链接故不写此条 ' [元素名称]：如:"innerText","id","href"之类 ' 超级模块首次调试时,增加取消功能,可以点击取消不绑定模块并继续使用,方便没有网络的用户暂时使用 ' 增加"取句柄3",采用多种方案来获取窗口句柄,防止功能被屏蔽而无法获取句柄 ' 修改"取进程窗口"改名为"取进程所有窗口" ' 增加"取进程窗口",通过进程ID与窗口标题来获取窗口句柄 ' 增加"文本_提取文本",返回提取的文本,从起始位置开始到寻找到的文本结束,该命令相比"文本_取中间文本"可忽略首或尾,从首开始,或提取到结尾,更加实用 ' 增加"高效位图操作类"中"_字符集",默认为134简体中文字符集,可更换字符集,使写文字功能适应不同语言的系统 ' 改进"高效位图操作类"中"复制",增加可空参数"复制方法",支持位与等操作以及透明色 ' 增加"高效位图操作类"中"复制",复制的同时支持缩放功能 ' 增加"高效位图操作类"中"画图片2",与"画图片"不同的是,支持"画出方法",用法与画板的画图片用法一样 ' 增加"识图5类"中"设定文字字符集",默
JS处理Button的隐藏与显示
weixin_33928137的博客
01-08 2万+
Html中Button的display属性控制着此Button的隐藏与显示功能，当display=="none"的时候是隐藏，display==“block”的时候是显示；并且display是存在于style中的。在Html中进行display属性的设置，请看如下代码： &lt;div&gt; &lt;button id="displayBtn" sty...
前端显示和隐藏<div>的方法 / 判断
Alone_in_的博客
10-24 5341
前端 div 模块的显示和隐藏方法： 一、加载页面时 隐藏 再 显示 ： 三种方法，亲测可行~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 T...
点击div显示隐藏模块
weixin_42245733的博客
12-23 413
点击div显示隐藏div,并改变图标 了解到关于html对象“this”与jquery对象“$(this)”的使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascri...
js点击按钮div显示隐藏
u010234868的专栏
06-12 7495
<input type="button" value="隐藏" id="btn"> <div id="box"></div> #box { width: 200px; height: 200px; background-color: red; } .show { display: block; } .hidden { display: none; } // 获取元素 var btn = document.getElementById('btn'); var
js如何将一个按钮显示或者隐藏
热门推荐
h_tinkinginjava的博客
10-19 5万+
关于一个元素的显示和隐藏有很多的方法，随便百度就可以找到办法，这边我就记录一下我是怎么显示和隐藏的，便于以后回顾。 需求是：当state为1和2时，按钮（id是plshbtn）就是隐藏起来；当state为0时，按钮就会显示。 js方法如下： if($("#state").val()==0){ $("#plshbtn").attr("style","display:block;"); }
JavaScript中的点击按钮显示和隐藏
XiaoAGiao16的博客
07-22 3619
4.这是点击隐藏的样式。5.这是点击显示的样式。
javascript (js)通过button按钮实现盒子的显示和隐藏
Smile林的博客
03-21 1万+
前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多 效果图： 点击隐藏后隐藏盒子，同时隐藏按钮的值修改为显示。点击显示后盒子又将显示，显示按钮的值修改为隐藏，如图： 完整代码如下（代码详解）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
js_button按钮_隐藏_显示
icecoola_的博客
07-31 5万+
1 隐藏 $(&quot;#btnId&quot;).attr(&quot;style&quot;,&quot;display:none;&quot;); $(&quot;#btnId&quot;).attr(&quot;style&quot;,&quot;display:block;&quot;);
javascript点击按钮实现隐藏显示切换效果
01-21
在不少应用中，都有这样的功能，点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此效果，代码如下: <html> <head> <meta charset=gb2312> <title&gt...
点击按钮（a标签）隐藏显示div内容，切换div内容
08-11
超级实用的点击隐藏，显示div内容，切换div内容 点击按钮（a标签）
html 点击按钮 实现页面内容地的隐藏与切换
08-11
html 点击按钮 实现页面内容地的隐藏与切换； JavaScript；CSS;HTML;页面部分内容的切换；
基于JavaScript实现表单密码的隐藏和显示出来
01-19
界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称. <div class=pass-box> <input type=password name=pass /> <i state=off></i> </div> 现在我们给相应的cla
基于JavaScript实现评论框展开和隐藏功能
01-19
点击评论会在对应的评论区域展开评论输入框，点击取消会取消对应的评论输入框 2.html代码：需要引入jQuery.js <div nclass=nr-comment> <div nclass=nr-comment-con> <div nclass=nr-comment-nav> <div nclass=...
JavaScript面试题和答案
08-13
29.用JS实现一个id为book的div的显示和隐藏（1分） .解释evel函数 （1分） evel函数可以接受一个字符串作为参数，并把此字符串当做一段javascript代码去执行，如果字符串执行结果是一个值则返回此值，否则返回...
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
云计算基础课件—架构dr.pptx
04-25
云计算基础课件—架构dr.pptx
067ssm-jsp-mysql艺诚美业管理系统.zip（可运行源码+数据库文件+文档）
04-25
L文主要是对艺诚美业管理系统进行了介绍，包括研究的现状，还有涉及的开发背景，然后还对系统的设计目标进行了论述，还有系统的需求，以及整个的设计方案，对系统的设计以及实现，也都论述的比较细致，最后对艺诚美业管理系统进行了一些具体测试。 本文以JSP为开发技术，实现了一个艺诚美业管理系统。艺诚美业管理系统的主要使用者分为管理员；个人中心、会员管理、员工管理、员工打卡管理、技师预约管理、发型美容师管理、技师类型管理、套餐信息管理、套餐类型管理、套餐购买管理、会员充值管理、系统管理，员工；个人中心、员工打卡管理、技师预约管理，会员；个人中心、技师预约管理、套餐购买管理、会员充值管理，前台首页；首页、发型美容师、套餐信息、我的、跳转到后台等功能。通过这些功能模块的设计，基本上实现了整个艺诚美业管理系统的过程。 具体在系统设计上，采用了B/S的结构，同时，也使用JSP技术在动态页面上进行了设计，后台上采用Mysql数据库，是一个非常优秀的艺诚美业管理系统。 关键词 ：艺诚美业管理系统；JSP技术；Mysql数据库；B/S结构
【微信小程序毕业设计】外卖点餐系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】外卖点餐系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：242】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 有管理员，外卖员，餐厅，用户共四个角色。管理员功能有个人中心，外卖员管理，餐厅管理，用户管理，菜品分类管理，菜品信息管理，外卖订单管理，订单配送管理，订单评价管理，在线留言管理，系统管理等。外卖员，餐厅，用户都可以在微信小程序上面进行注册和登录操作。餐厅角色可以在微信小程序上面进行菜品的添加，修改，删除，查询操作，可以对用户的订单进行审核操作，查看订单配送状态和评价，可以查看投诉反馈和在线留言等。外卖员角色可以在微信小程序上面进行订单的抢单操作，查看订单配送和评价信息等。 用户角色可以在微信小程序上面进行菜品的查看和查询，对自己下的订单进行支付操作，查看订单配送和对订单评价，收藏菜品等操作。
点击按钮显示隐藏div
09-02
要实现点击按钮显示隐藏div的效果，你可以使用JavaScript来操作DOM元素。以下是一种简单的方式来实现这个功能： 首先，在HTML中创建一个按钮和一个要隐藏的div元素： ```html <button id="toggleButton">点击按钮</button> <div id="hiddenDiv" style="display: none;">这是要隐藏的内容。</div> ``` 然后，在JavaScript中监听按钮的点击事件，并根据当前div的显示状态来切换其显示与隐藏： ```javascript var button = document.getElementById("toggleButton"); var hiddenDiv = document.getElementById("hiddenDiv"); button.addEventListener("click", function() { if (hiddenDiv.style.display === "none") { hiddenDiv.style.display = "block"; } else { hiddenDiv.style.display = "none"; } }); ``` 以上代码中，我们通过getElementById方法获取按钮和div元素的引用，并使用addEventListener方法为按钮添加一个点击事件监听器。在事件处理函数中，我们检查当前div的display属性值，如果是"none"（表示隐藏），则将其设置为"block"（表示显示），反之亦然。 这样，当按钮被点击时，div的显示状态就会切换，实现了点击按钮显示隐藏div的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值