用JQuery实现点击按钮来显示/隐藏某个div

最新推荐文章于 2024-05-18 10:46:37 发布
最新推荐文章于 2024-05-18 10:46:37 发布
阅读量2.8k 收藏 4
点赞数 2
分类专栏： JavaScript 前端开发 文章标签： click toggle() 显示/隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jal517486222/article/details/83586810
版权
这篇博客介绍了如何使用jQuery的toggle()方法轻松实现点击按钮动态显示或隐藏div，避免了之前需要判断display属性的繁琐过程。同时提醒在HTML中引入jQuery的CDN链接。
摘要由CSDN通过智能技术生成

刚开始我还在判断div的display属性是不是等于"none"，来选择是show()还是hide()，现在才想起来直接用toggle()方法就可以了嘛，真的是太方便了

使用jQuery的时候，千万不要忘记在HTML页面加jQuery的CDN哟
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

HTML代码

<div class="row">
    <button id=
最低0.47元/天 解锁文章
爱玲姐姐
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击按钮（a标签）隐藏显示div内容，切换div内容
05-04
点击按钮（a标签）隐藏显示div内容，切换div内容
jquery实现点击按钮显示与隐藏效果
WU567_的博客
06-29 1265
首先来看实现效果 用jquery来实现这种效果是非常简单的 html <div class="bottom"> <ul> <li class="active"> <span class="iconfont icon-yemian-copy-copy"></span> <p>首页</p>
hide(),show()与removeClass(),addClass()区别
louzan3191的博客
10-23 4137
hasClass() 是否存在某个class hide() 隐藏对象 show() 显示对象 removeClass() 移除一个class addClass() 添加一个class 除此，还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示 toggle() 的作用就是当对象是显示的就隐藏，当是隐藏的则显示。
单击按钮隐藏div
哈欠打飞天的博客
07-12 397
开始： 点击按钮，文本框出现，再次点击，文本框隐藏。 HTML: <input type="button" class="reply" value="try"> <div class="second"> <input type="text"> </div> CSS: <style> .second{ displ..
点击按钮控制div隐藏和显示
weixin_41595613的博客
11-23 4772
要求：有一个按钮，点击按钮使得div消失，之后将按钮文字改变为显示，再次点击按钮使得div出现，依次类推
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
10-22
当我们将click事件与toggle方法结合使用时，可以通过编写jQuery代码来绑定点击事件处理器，使得每次点击某个元素（例如按钮）时，就会切换DIV元素的显示与隐藏状态。为了实现这一点，我们通常会使用$(选择器).click...
jQuery实现菜单的显示和隐藏功能示例
10-18
在这篇文章中，我们主要学习了如何利用jQuery技术来实现网页菜单的显示和隐藏功能。通过实例演示的方式，作者详细分析了如何基于jQuery事件响应机制以及CSS样式动态地改变菜单的显示状态。下面，我们将详细梳理本文...
js实现的点击div区域外隐藏div区域
10-25
在Web开发中，经常会遇到需要实现点击某个区域之外的页面其他部分来隐藏该区域的需求。本文所讲述的是基于JavaScript和jQuery实现点击div区域外隐藏div区域的技术细节和实现方法。通过分析文档中提供的代码示例和...
js实现input密码框显示/隐藏功能
10-17
总结来说，通过上述知识点的介绍和示例代码的解析，可以了解到实现密码框显示和隐藏功能的基本原理和技术实现方法。这不仅是一个基础功能的实现，而且涉及到前端开发中的HTML、CSS和JavaScript技术的综合运用，同时...
jQuery点击显示弹出框关闭按钮代码.zip
07-11
"jQuery点击显示弹出框关闭按钮代码"是一个实例，它利用jQuery的功能来实现一个基本的弹出框，这个弹出框会在用户点击某个元素时显示，并且包含一个用于关闭弹出框的按钮。下面我们将详细探讨这一知识点。 首先，...
点击按钮显示隐藏div
canoe1234的博客
01-14 3431
//测试点击按钮div出现，再次点击div关闭 &lt;script type="text/javascript"&gt; function ClickMenu(diving) { //alert(diving); if (document.getElementById(diving).style.display == "none") { document.getElementById(divin...
JQuery显示隐藏一个按钮
nano-dhh
07-16 1644
... 添加所有第三方账号 /** * 显示添加所有第三方账户按钮，如果选项是用户ID的话，就显示出这个按钮 * @param obj */ function showAddAllButton(obj){ var value = $(obj).val(); if(value == 11){ $("#addAllOtherAccount").removeAttr("hidd
jquery点击按钮显示和隐藏DIv
小画家
03-04 2168
function changeDisplay() {             if ($("#btnShow").attr("value")== "添加附件") {                 $("#IdShow").show();                 $("#btnShow").attr("value", "取消添加附件");             }
jquery隐藏按钮
热门推荐
师远鹏
05-15 1万+
jquery隐藏按钮 1 $(function () { 4 if (shhbs == "istj") 5 $("#button1").hide(); 6 });
jquery点击按钮显示和隐藏div
weixin_30832983的博客
01-15 1339
【转】jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value")== "添加附件") { 3 $("#IdShow").show(); 4 $("#bt...
JavaScript 控制元素案例点击按钮显示隐藏 div
最新发布
猿码互联
05-18 450
这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。方法获取按钮和内容的元素，并将其分别保存在。方法为按钮绑定一个点击事件的监听器。在监听器函数中，通过检查内容元素的。样式属性，如果其值为。
19点击一个按钮，设置div的隐藏
dinggu6579的博客
08-28 211
方法一、通过判断当前点击的按钮的value属性 <style type="text/css"> div { width: 200px; height: 200px; background-color: #008000; ...
jQuery中显示与隐藏
m0_74577714的博客
11-10 761
在我们jQuery当中，有多个显示隐藏的方法，本篇介绍一下。//点击后元素样式变成了display:block;//点击之后元素添加上了display:none;//点击之后元素添加上了display:none;//当我们元素的样式是display:block时。//点击后元素样式变成了display:none;//当我们元素的样式是display:none时。
jquery点击按钮DIV隐藏
07-27
- *1* [用JQuery实现点击按钮来显示/隐藏某个div](https://blog.csdn.net/jal517486222/article/details/83586810)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值