jQuery显示隐藏div的几种方法
1、$("#demo").attr("style","display:none;");//隐藏div
$("#demo").attr("style","display:block;");//显示div
2、$("#demo").css("display","none");//隐藏div
$("#demo").css("display","block");//显示div
3、$("#demo").hide();//隐藏div
$("#demo").show();//显示div
4、$("#demo").toggle(//动态显示和隐藏
function () {
$(this).attr("style","display:none;");//隐藏div
},
function () { $(this).attr("style","display:block;");//显示div
}
);
<div id="demo"></div>
注：
$("#demo").show()表示display:block,
$("#demo").hide()表示display:none;
1和2中的display:none可以换成visibility:hidden，display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间，而后者隐藏后会占空间
例：
- <script type="text/javascript">
- function showDiv1(){
- //$("#test1").attr("style","display:block");
- //$("#test1").show();
- $("#test1").css("display","block");
- }
- function showDiv2(){
- //$("#test2").attr("style","visibility:visible");
- $("#test2").css("visibility","visible");
- }
- function hiddenDiv1(){
- $("#test1").hide();
- }
- function hiddenDiv2(){
- $("#test2").attr("style","visibility:hidden");
- }
- </script>
- </head>
- <body>
- <div id="test1" style="display:none">aaaaaa</div> <%--隐藏的div--%>
- <div id="test2" style="visibility: hidden">bbbbb</div> <%--隐藏的div--%>
- <button onclick="showDiv1()">显示1</button>
- <button onclick="showDiv2()">显示2</button>
- <button onclick="hiddenDiv1()">隐藏1</button>
- <button onclick="hiddenDiv2()">隐藏2</button>
- </body>
jQuery显示隐藏div的几种方法的更多相关文章
- js jQuery显示隐藏div的几种方法
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...
- jquery中隐藏div的几种方法
//jQuery中的显示.隐藏方法 $("#id").show()://表示display:block, $("#id").hide()://表示disp ...
- [jquery]显示隐藏div标签的几种方法
1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...
- jQuery显示隐藏动态效果的几种写法
<script type="text/javascript"> $(document).ready(function() { /*$("#test1& ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
- CSS中隐藏内容的3种方法
CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...
随机推荐
- 用实例的方式去理解storm的并发度
什么是storm的并发度 一个topology(拓扑)在storm集群上最总是以executor和task的形式运行在suppervisor管理的worker节点上.而worker进程都是运行在jvm ...
- PAT Basic 1087 有多少不同的值 (20 分)
当自然数 n 依次取 1.2.3.…….N 时,算式 ⌊ 有多少个不同的值?(注:⌊ 为取整函数,表示不超过 x 的最大自然数,即 x 的整数部分.) 输入格式: 输入给出一个正整数 N(2). 输出 ...
- 3-cmd命令
1.查看IPC$是否启用 命令:net share 2.启动/停止windows服务 命令:net start MSDTC net stop MSDTC 3.修改服务的启动类型(start= ...
- Linux初始化脚本
以下脚本用于linux系统的初始化脚本,可以在服务器系统安装完毕之后立即执行.脚本结合各位大牛一些参数,已经在CentOS 5下通过. 使用方法:将其复制,保存为一个shell文件,比如init.sh ...
- 218多校第九场 HDU 6424 （数学）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6424 题意:定义f(A) = log log log log …. (A个log) n ,g[A,B, ...
- vue04
目录 Vue项目环境 项目的创建 vue根据配置重新构建依赖 pycharm管理vue项目 vue项目目录结构分析 vue项目生命周期 views文件夹内的.vue文件介绍 配置自定义全局样式 导航栏 ...
- HDU 6107 - Typesetting | 2017 Multi-University Training Contest 6
比赛的时候一直念叨链表怎么加速,比完赛吃饭路上突然想到倍增- - /* HDU 6107 - Typesetting [ 尺取法, 倍增 ] | 2017 Multi-University Train ...
- net core 3 使用 autofac
参考官方:https://docs.autofac.org/en/latest/integration/aspnetcore.html#startup-class 有一些变动,现在暂时还没用net c ...
- 怎么把word文档粘贴到编辑器里啊?
很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...
- bbs-admin-自定义admin(一)
自定义admin 概要:django-admin本质就是一个app,只是Django内部分装了,因此我们尝试自己设计一个简易版的admin 设计前知识补充: model._meta.app_label ...