单击隐藏按钮将隐藏所有的<p></p>之间的所有内容，单击显示按钮后将会再次出现，刚才隐藏的所有<p></p>中的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="application/javascript" src="jquery-1.11.3.min.js"> </script> <script type="application/javascript"> //$(document).ready(function() {$("p").hide()}); $(document).ready(function() { $("#hide").click(function(){$("p").hide();}); $("#show").click(function(){$("p").show();}); }); </script> </head> <body> <p>显示的内容</p> <input id="hide" type="button" value="隐藏" /> <input id="show" type="button" value="显示" /> </body> </html>
隐藏按钮将class=a的所有行数用3s进行淡出隐藏，在此点击后3s内再淡入出现。
显示按钮进行自我隐藏！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="application/javascript" src="jquery-1.11.3.min.js"> </script> <script type="application/javascript"> //$(document).ready(function() {$("p").hide()}); $(document).ready(function() { //$("#hide").click(function(){$("p").hide();}); //$("#show").click(function(){$("p").show();}); }); </script> </head> <body> <p>显示的内容</p> <p class="a">显示的内容2</p> <div>div 显示</div> <input id="hide" type="button" value="隐藏" onclick="$(this).click($('.a').fadeToggle(3000))" /> <input id="show" type="button" value="显示" onclick="$(this).click($(this).hide())" /> </body> </html>