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可 ...
随机推荐
- 2019年C题 视觉情报信息分析
2019 年第十六届中国研究生数学建模竞赛C 题 任务1中 图三:图3 中拍照者距离地面的高度 目录: 0.试题分析: 1.构建摄像机模型 2.摄像机参数假定 3.像平面坐标计算 4.图像标定及数值测 ...
- 常用Linux文件系统
- SPI总线的原理与Verilog实现
转载地址:https://www.cnblogs.com/liujinggang/p/9609739.html 一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件 ...
- CentOS 6.10 系统安装
本章内容: CentOS 6.10 的安装 一.安装光盘,选择 Install or upgrade an existing system 二.选择 skip 跳过光盘检查 三.选择 Next 四.选 ...
- 在VS2017添加MVC项目
以前一直是用vs2012 MVC直接可以找到 在公司用的是vs2017 今天想创建一个MVC,和vs不同啊!!! 居然找不到MVC 然后找找找 ,突然想到创建asp.net 项目的时候发现了MV ...
- 2.04_Python网络爬虫_Requests模块
一:Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 ...
- PAT Basic 1057 数零壹 (20 分)
给定一串长度不超过 1 的字符串,本题要求你将其中所有英文字母的序号(字母 a-z 对应序号 1-26,不分大小写)相加,得到整数 N,然后再分析一下 N 的二进制表示中有多少 0.多少 1.例如给定 ...
- 图像处理---《Canny 边缘检测》
图像处理---<Canny 边缘检测> 很想系统的把图像处理之边缘检测部分详细的过一遍,对比一个各个算子的优良性能.时间紧,精力有限,现在只能走哪补哪,随手记. 有几个简单的场景,有需要, ...
- Django 权限控制配置步骤
1.models下面添加权限控制信息: class UserProfile(models.Model): user = models.OneToOneField(User) name = models ...
- P1231 教辅的组成 拆点限流
如果只有两个物品的话 是一个裸的二分图匹配问题 现在变成了三个物品之间的匹配 则只要在中间加一层节点表示书 再把这层的每个点拆成两个点中间连一条边限制流量 使其只能用一次 #include<io ...