点击按钮显示或隐藏Div块

最新推荐文章于 2024-05-18 10:46:37 发布
最新推荐文章于 2024-05-18 10:46:37 发布
阅读量1.2w 收藏 38
点赞数 10
分类专栏： 前端 文章标签： 动态显示和隐藏div 点击按钮显示和隐藏div toggle()
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GRAY_KEY/article/details/80073022
版权

通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换。

代码如下：

方法一：

<!DOCTYPE html>
<html>
<head>
        <script src="/jquery/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("#div1").toggle();
                });
            });
        </script>
</head>
<body>
        <h3>点击按钮显示或隐藏Div块</h3>
        <button type="button">按钮</button>
        <div id="div1" style="border:2px solid #ff0000">
            再点击一下按钮我就会隐藏起来.
        </div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
<head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
  	function showOrHide(){
  		var div = $("#div1").get(0);
  		if(div.style.display == ""){
  			div.style.display = "none";
  		}else{
  			div.style.display = "";
  		}
  	}
    </script>
</head>
<body>
    <h3>点击按钮显示或隐藏Div块</h3>
    <button οnclick="showOrHide()" type="button">按钮</button>
    <div id="div1" style="display: none;border:2px solid #ff0000;">
        再点击一下按钮我就会隐藏起来.
    </div>
</body>
</html>

效果如下：





GRAY_KEY
关注
  • 10
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
点击按钮（a标签）隐藏显示div内容，切换div内容
05-04
点击按钮（a标签）隐藏显示div内容，切换div内容
用 CSS 隐藏页面元素的 5 种方法
Enweitech Software Works
06-13 744
用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为absolute 然后将位置设到不可见区域。 你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场
JavaScript 控制元素案例点击按钮显示隐藏 div
最新发布
猿码互联
05-18 366
这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。方法获取按钮和内容的元素，并将其分别保存在。方法为按钮绑定一个点击事件的监听器。在监听器函数中，通过检查内容元素的。样式属性，如果其值为。
html实现点击元素的出现与隐藏
majiayu000的博客
04-01 6314
html点击元素出现隐藏提示需要隐藏或提示的内容使用jquery完成点击元素出现提示点击元素以外提示隐藏完整的代码段 需要隐藏或提示的内容 今天想做一个网页，实现点击文本框出现文字提示，点击文本框以外的位置，即光标不在文本框的时候，提示消失。以下是想要点击的文本框内容，和提示文字 代码如下.： <input name="name" id='name' class="ui-input" pl...
JavaScript 仿LightBox内容显示效果
cloudgamer的专栏
09-15 563
近来要做一个LightBox的效果（也有的叫Windows关机效果），不过不用那么复杂，能显示一个内容框就行了。这个效果很久以前就做过，无非就是一个覆盖全屏的层，加一个内容显示的层。不过showbo教了我position:fixed这个新特性，决定重写一遍。先看效果：<!--var isIE = (document.all) ? true : false;var isIE
点击按钮切换div及其内容（两种方法：Vue指令方式，2024年最新前端项目实战案例
2401_83621541的博客
04-11 1220
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
元素的显示与隐藏，案例：鼠标经过显示遮罩
m0_69034993的博客
07-09 935
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生声明。除了转换为块元素之外，同时还有显示元素的意思。visibility属性用于指定一个元素应可见还是隐藏。visibility隐藏元素后，继续占有原来的位置。display隐藏元素后，不再占有原来的位置。display属性用于设置一个元素如何显示。3.overflow 溢出显示隐藏。
js点击按钮div显示隐藏
u010234868的专栏
06-12 7679
<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
html隐藏按钮
热门推荐
zanxin0331的专栏
08-23 1万+
我在一个页面上写了两个按钮，是为了进行页面的复用，然后根据不同的访问次页面的上级传入不同的参数，来隐藏其中的一个按钮： 我这里是从两个不同的页面进入复用的页面时分别传入0和1在复用页面中定义了个空的getfather：“”来接受这个传入的参数 然后我在&lt;el-button&gt;中直接添加 v-if &lt;el-button v-model="buttontwo" v-if="get...
点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏
信念堤岸
11-24 1万+
当点击按钮后显示隐藏层，满足鼠标在div里操作不隐藏，在外边点击会消失的功能。                                 逻辑上主要是阻止浏览器的冒泡                                             //点击#btnClick时要阻止冒泡，否则.pop是不显示的，         //因为冒泡了，会执行到下面
点击按钮显示隐藏内容
cpfor
03-17 3857
&lt;li&gt; &lt;input type="radio" onclick="ydiaosai()"&gt; &lt;label &gt;点击显示&lt;/label&gt; &lt;/li&gt; &lt;li&gt; &lt;input type="radio" onclick="ndiaosai()
javascript点击按钮实现隐藏显示切换效果
01-21
本文实例分享了点击按钮实现隐藏和显示的切换代码，供大家参考，具体内容如下 效果图： 在不少应用中，都有这样的功能，点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此...
Jquery 点击按钮显示和隐藏层的代码
10-28
在网页开发中，经常需要实现一些交互效果，比如点击按钮显示或隐藏某些内容。这个例子中，我们看到的是一个使用jQuery库实现的简单功能，即点击按钮显示和隐藏层。以下是详细的知识点解析： 1. **jQuery库**：...
javascript实现div的显示和隐藏的小例子
10-27
标签“div”、“显示”和“隐藏”明确了讨论的核心内容：如何操作div元素的显示属性以达到隐藏或显示的效果。 部分内容是一个完整的HTML文件，包含了一个按钮（`<input type="button">`）和一个div（`<div id="div1...
vue动画之点击按钮往上渐渐显示出来的实例
10-17
`methods`对象中定义了一个`togglebox`方法，用于切换`boxshow`的值，这样每次点击按钮，`boxshow`就会在`true`和`false`之间切换，从而触发元素的显示和隐藏，以及对应的过渡效果。 在`<button>`元素上，我们使用`...
点击展开的div
10-30
用户点击一个元素（通常是按钮或链接），一个隐藏的div就会显示出来，展示更多的信息或功能。这种效果常用于菜单、折叠式内容块、下拉列表等场景。下面将详细介绍实现这一功能的相关知识点。 首先，我们需要理解...
一种内容区高度不定的展开收起方案
林中路
12-09 1229
缘起 在日常开发中，经常会遇到有些区块内容可以展开收起的需求，例如以下这两种： 固定高度式： 非固定式: 固定式 对于内容固定，高度固定的情况，很好实现，可以一开始就显示展开/收起按钮，点击切换区块的高度即可。 非固定式 而对于内容多少不固定，最终高度也不一定的情况，则稍显复杂，难点在于： 内容未超出规定高度时，展开/收起按钮不显示 内容超出规定高度时，显示展开/收起按钮 由于内容高度不一定，当点击展开按钮时，无法确定显示高度 对于这种情况，现介绍以下实现方案 实现 &
html css 隐藏和显示按钮
weixin_44493841的博客
08-05 8726
html 隐藏和显示按钮 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <div>     <!--display:block:显示按钮--
用HTML和CSS实现点击内容显示再点击隐藏
weixin_34290096的博客
09-02 3035
实现思路： 1.display:none,隐藏元素;点击时display:black; 2.设置隐藏元素高度为0，overflow:hidden;点击时overflow:visible; 由于第一条只能实现点击时显示，不能实现继续隐藏；排除方法1。 考虑复选框特性，点击时样式框内有小勾，再点击时小勾消失。 HTML实现代码： <div> &l...
点击按钮显示隐藏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的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值