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

最新推荐文章于 2023-12-09 14:25:27 发布
最新推荐文章于 2023-12-09 14:25: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
    评论
专栏目录
JavaScript 控制元素案例点击按钮显示隐藏 div
猿码互联
05-18 413
这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。方法获取按钮和内容的元素，并将其分别保存在。方法为按钮绑定一个点击事件的监听器。在监听器函数中，通过检查内容元素的。样式属性，如果其值为。
javascript (js)通过button按钮实现盒子的显示和隐藏
Smile林的博客
03-21 1万+
前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多 效果图： 点击隐藏后隐藏盒子，同时隐藏按钮的值修改为显示。点击显示后盒子又将显示，显示按钮的值修改为隐藏，如图： 完整代码如下（代码详解）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
js点击按钮div显示隐藏
u010234868的专栏
06-12 7726
<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 DOM案例 点击按钮实现显示相应列表 多种方法
modao的博客
06-06 1474
本文通过不同方法实现一个小的点击触发事件按例，主要注意的是排他思想的使用和、let和var关键字的区别，希望以后能够收益，作为自己经验的积累
Javascript点击显示和隐藏
weixin_67107650的博客
05-29 5456
这次来分享一个用javascript实现的一个点击图片显示。 1.开始依旧是先把HTML框架敲打出来，一个div包含两个小按钮b标签，另一个div放一个img标签。 2.把两个按钮的样式敲出来和img样式。 3.获取两个按钮和图片的id。 4.然后给两个按钮设置点击事件，再添加一个显示和隐藏属性。 5.下面是整体代码和展示效果。 上面就是我所学到的javascript部分小知识，新手上路，多多指教，如果有更好的方法或不 懂得地方欢迎在评论区教导和提问喔！ ...
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...
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
weixin_42530536的博客
06-03 1384
javascript实现显示和隐藏div方法汇总15种方法实现div显示和隐藏body{margin: 0;}h1,h2{margin: 0;}ul{margin: 0;padding: 0;list-style: none;}button{background-color: #333;color: white;padding: 5px;border: none;border-radius: 10...
javascript点击按钮实现隐藏显示切换效果
10-22
在本例中，我们将探讨如何使用JavaScript实现一个简单的功能，即点击按钮时，实现元素的隐藏与显示的切换效果。 首先，让我们分析提供的代码。整个示例由HTML、CSS和JavaScript三部分组成： 1. HTML部分： - `<a>...
javascript实现div的显示和隐藏的小例子
10-27
部分内容是一个完整的HTML文件，包含了一个按钮（`<input type="button">`）和一个div（`<div id="div1">`）。当点击按钮时，会触发`onclick`事件，调用`toggle('div1')`函数。这个函数检查div的`display`样式属性，...
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
11-17
在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航...
JQuery DIV 动态隐藏和显示的方法
10-22
在这个例子中，`$("#btnOne").bind("click", function(event) {...})`绑定了一个点击事件处理函数，当用户点击ID为`btnOne`的按钮时，对应的事件处理函数会被执行。JQuery 3.0以后推荐使用`on()`方法来替代`bind()`...
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中的点击按钮显示和隐藏
XiaoAGiao16的博客
07-22 3692
4.这是点击隐藏的样式。5.这是点击显示的样式。
js控制按钮,div显示和隐藏
码客笔记
06-13 1万+
<button class="btn btn-info" id="myModal">点我一下</button> 方法(一) $("#myModal").show();//显示 $("#myModal").hide();//隐藏 方法二 $("#myModal").css("display","none");//隐藏 $("#myModal")....
JavaScript之通过按钮实现隐藏和显示
m0_56047670的博客
01-02 3265
前端css，实现显示隐藏内容
JS实现点击显示/隐藏
qq_52006379的博客
08-23 5324
JS实现点击显示/隐藏。
js事件触发
最新发布
zhengying5dvhdg的博客
12-09 3195
js事件，冒泡事件，Event对象，事件委托，移动端事件
点击按钮显示隐藏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、付费专栏及课程。

余额充值