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>

教育资源为主的文档平台

文档分类