JQuery动态隐藏和显示DIV
上传者:陈飞|上传时间:2015-04-21|密次下载
JQuery动态隐藏和显示DIV
JQuery动态隐藏和显示DIV
?JQuery动态隐藏和显示DIV 使用jquery要控制div的显示与隐藏真的很方便,一句话就搞定了,请看下面使用说明。 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 $("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; 不过记得一定要加JQuery的引用: <script type="text/javascript" src="../../scripts/jquery.min.js"></script> 在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍。 jquery 显示隐藏div方法show(),hide(),toggle(),slideDown()总结 1,show()方法 显示出隐藏的 <p> 元素。 $(".btn2").click(function() { $("p").show(); }); 2,toggle()方法 toggle() 方法切换元素的可见状态。 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn1").click(function() { $("p").toggle(1000); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Toggle</button> </body> </html> 3,slideDown()方法 以滑动方式显示隐藏的 <p> 元素: $(".btn2").click(function() { $("p").slideDown(); }); 4,hide() 方法 隐藏可见的 <p> 元素: $(".btn1").click(function() { $("p").hide(); }); 这个函数经常与show一起使用 5,css()方法 css() 方法设置或返回被选元素的一个或多个样式属性。 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); $("p").css("display","none"); 下面来看一个实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wendang.chazidian.com/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://wendang.chazidian.com/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> $(document).ready( function(){}); function hiden() { $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast } function slideToggle() { $("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 } function show() { $("#divObj")
JQuery动态隐藏和显示DIV
.show();//显示,参数说明同上 } function toggle() { $("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上 } function slide() { $("#divObj").slideDown();//窗帘效果展开 } </script> </head> <body> <h3>div里内容的显示隐藏特效</h3> <input type="button" value="隐藏" onclick="hiden()"/> <input type="button" value="显示" onclick="show()"/> <input type="button" value="窗帘效果显示2" onclick="slide()"/> <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/> <input type="button" value="隐藏显示效果切换" onclick="toggle()"/> <div id="divObj" style="display:none"> 1.测试例子<br/> 2.测试例子<br/> 3.测试例子<br/> 4.测试例子<br/> 5.测试例子<br/> 6.测试例子<br/> 7.测试例子<br/> 8.测试例子<br/> 9.测试例子<br/> 0.测试例子<br/> </div> </body> </html>
下载文档
热门试卷
- 2016年四川省内江市中考化学试卷
- 广西钦州市高新区2017届高三11月月考政治试卷
- 浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
- 浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
- 辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
- 广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
- 广西钦州市钦州港区2017届高三11月月考政治试卷
- 广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
- 广西钦州市高新区2016-2017学年高二11月月考政治试卷
- 广西钦州市高新区2016-2017学年高一11月月考政治试卷
- 山东省滨州市三校2017届第一学期阶段测试初三英语试题
- 四川省成都七中2017届高三一诊模拟考试文科综合试卷
- 2017届普通高等学校招生全国统一考试模拟试题(附答案)
- 重庆市永川中学高2017级上期12月月考语文试题
- 江西宜春三中2017届高三第一学期第二次月考文科综合试题
- 内蒙古赤峰二中2017届高三上学期第三次月考英语试题
- 2017年六年级(上)数学期末考试卷
- 2017人教版小学英语三年级上期末笔试题
- 江苏省常州西藏民族中学2016-2017学年九年级思想品德第一学期第二次阶段测试试卷
- 重庆市九龙坡区七校2016-2017学年上期八年级素质测查(二)语文学科试题卷
- 江苏省无锡市钱桥中学2016年12月八年级语文阶段性测试卷
- 江苏省无锡市钱桥中学2016-2017学年七年级英语12月阶段检测试卷
- 山东省邹城市第八中学2016-2017学年八年级12月物理第4章试题(无答案)
- 【人教版】河北省2015-2016学年度九年级上期末语文试题卷(附答案)
- 四川省简阳市阳安中学2016年12月高二月考英语试卷
- 四川省成都龙泉中学高三上学期2016年12月月考试题文科综合能力测试
- 安徽省滁州中学2016—2017学年度第一学期12月月考高三英语试卷
- 山东省武城县第二中学2016.12高一年级上学期第二次月考历史试题(必修一第四、五单元)
- 福建省四地六校联考2016-2017学年上学期第三次月考高三化学试卷
- 甘肃省武威第二十三中学2016—2017学年度八年级第一学期12月月考生物试卷
网友关注
- 2 封锚工序考核试卷
- 计算机网格信息安全与管理试题答案8
- 桥梁工程 大工15春《桥梁工程》在线作业1及答案
- 计算机原理 大工15春《计算机原理》在线作业2及答案
- 电器学 大工15春《电器学》在线测试1及答案
- 大工15春《国际金融》在线作业1答案
- 计算机网格信息安全与管理试题答案6
- 环境监测复习题
- 计算机网格信息安全与管理试题答案3
- 职业道德复习题(仿考)
- T+产品操作课件-财务(new)
- 财务管理考试试题
- 结构设计原理 大工15春《结构设计原理》在线作业1及答案
- 自学考试 审计模拟考题
- 建筑制图 大工15春《建筑制图》在线作业3及答案
- 电路理论 大工15春《电路理论》在线作业2及答案
- 第一章总论练习题
- 大工15春《数字电路与系统》在线作业2及答案
- 刀具(磨工题库)
- 桥梁修补作业试题答案
- 测量学 大工15春《测量学》在线作业2及答案
- 多媒体技术 大工15春《多媒体技术》在线测试3及答案
- 大工15春《国际金融》在线作业2答案
- 结构设计原理 大工15春《结构设计原理》在线作业3及答案
- 电路理论 大工15春《电路理论》在线作业1及答案
- 多媒体技术 大工15春《多媒体技术》在线测试2及答案
- 大工15春《国际金融》在线作业3答案
- 大工15春《数字电路与系统》在线作业3及答案
- 2014年下期幼儿园试题
- 大工15春《数字电路与系统》在线作业1及答案
网友关注视频
- 第8课 对称剪纸_第一课时(二等奖)(沪书画版二年级上册)_T3784187
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,辽宁省
- 冀教版英语五年级下册第二课课程解读
- 【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案,安徽省
- 外研版八年级英语下学期 Module3
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,湖北省
- 沪教版牛津小学英语(深圳用)五年级下册 Unit 1
- 精品·同步课程 历史 八年级 上册 第15集 近代科学技术与思想文化
- 冀教版小学数学二年级下册第二单元《有余数除法的竖式计算》
- 第12章 圆锥曲线_12.7 抛物线的标准方程_第一课时(特等奖)(沪教版高二下册)_T274713
- 二年级下册数学第一课
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,安徽省
- 冀教版英语四年级下册第二课
- 北师大版数学 四年级下册 第三单元 第二节 小数点搬家
- 冀教版小学数学二年级下册第二单元《有余数除法的简单应用》
- 沪教版八年级下册数学练习册20.4(2)一次函数的应用2P8
- 外研版英语七年级下册module1unit3名词性物主代词讲解
- 冀教版小学英语五年级下册lesson2教学视频(2)
- 外研版英语七年级下册module3 unit2第一课时
- 沪教版牛津小学英语(深圳用) 四年级下册 Unit 12
- 二年级下册数学第三课 搭一搭⚖⚖
- 外研版英语三起6年级下册(14版)Module3 Unit1
- 8 随形想象_第一课时(二等奖)(沪教版二年级上册)_T3786594
- 苏教版二年级下册数学《认识东、南、西、北》
- 北师大版小学数学四年级下册第15课小数乘小数一
- 沪教版牛津小学英语(深圳用) 五年级下册 Unit 10
- 三年级英语单词记忆下册(沪教版)第一二单元复习
- 二年级下册数学第二课
- 小学英语单词
- 沪教版牛津小学英语(深圳用) 五年级下册 Unit 7
精品推荐
- 2016-2017学年高一语文人教版必修一+模块学业水平检测试题(含答案)
- 广西钦州市高新区2017届高三11月月考政治试卷
- 浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
- 浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
- 辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
- 广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
- 广西钦州市钦州港区2017届高三11月月考政治试卷
- 广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
- 广西钦州市高新区2016-2017学年高二11月月考政治试卷
- 广西钦州市高新区2016-2017学年高一11月月考政治试卷
分类导航
- 互联网
- 电脑基础知识
- 计算机软件及应用
- 计算机硬件及网络
- 计算机应用/办公自动化
- .NET
- 数据结构与算法
- Java
- SEO
- C/C++资料
- linux/Unix相关
- 手机开发
- UML理论/建模
- 并行计算/云计算
- 嵌入式开发
- windows相关
- 软件工程
- 管理信息系统
- 开发文档
- 图形图像
- 网络与通信
- 网络信息安全
- 电子支付
- Labview
- matlab
- 网络资源
- Python
- Delphi/Perl
- 评测
- Flash/Flex
- CSS/Script
- 计算机原理
- PHP资料
- 数据挖掘与模式识别
- Web服务
- 数据库
- Visual Basic
- 电子商务
- 服务器
- 搜索引擎优化
- 存储
- 架构
- 行业软件
- 人工智能
- 计算机辅助设计
- 多媒体
- 软件测试
- 计算机硬件与维护
- 网站策划/UE
- 网页设计/UI
- 网吧管理