div 隐藏显示各种例子

<html>
<head>
<title>jquery show()</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--------------------------------------- show() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">show()</div></p>
<p><input id="button1" type="button" value="显示div" />&nbsp;&nbsp;<input id="button2" type="button" value="隐藏div" /></p>
<div id="div1" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button1").click(function(){
$("#div1").show();
});

$("#button2").click(function(){
$("#div1").hide();
});
</script>

<!--------------------------------------- show(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">show(500)</div></p>
<p><input id="button3" type="button" value="显示div" />&nbsp;&nbsp;<input id="button4" type="button" value="隐藏div" /></p>
<div id="div2" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button3").click(function(){
$("#div2").show(500);
});

$("#button4").click(function(){
$("#div2").hide(500);
});
</script>


<!--------------------------------------- fadeIn() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeIn()</div></p>
<p><input id="button5" type="button" value="显示div" />&nbsp;&nbsp;<input id="button6" type="button" value="隐藏div" /></p>
<div id="div3" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button5").click(function(){
$("#div3").fadeIn();
});

$("#button6").click(function(){
$("#div3").fadeOut();
});
</script>

<!--------------------------------------- fadeIn(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeIn(500)</div></p>
<p><input id="button7" type="button" value="显示div" />&nbsp;&nbsp;<input id="button8" type="button" value="隐藏div" /></p>
<div id="div4" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button7").click(function(){
$("#div4").fadeIn(500);
});

$("#button8").click(function(){
$("#div4").fadeOut(500);
});
</script>

<!--------------------------------------- slideDown() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideDown()</div></p>
<p><input id="button9" type="button" value="显示div" />&nbsp;&nbsp;<input id="button10" type="button" value="隐藏div" /></p>
<div id="div5" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button9").click(function(){
$("#div5").slideDown();
});

$("#button10").click(function(){
$("#div5").slideUp();
});
</script>

<!--------------------------------------- slideDown(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideDown(500)</div></p>
<p><input id="button11" type="button" value="显示div" />&nbsp;&nbsp;<input id="button12" type="button" value="隐藏div" /></p>
<div id="div6" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button11").click(function(){
$("#div6").slideDown(500);
});

$("#button12").click(function(){
$("#div6").slideUp(500);
});
</script>


<!--------------------------------------- slideToggle() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideToggle()</div></p>
<p><input id="button13" type="button" value="显示/隐藏div" /></p>
<div id="div7" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button13").click(function(){
$("#div7").slideToggle();
});
</script>


<!--------------------------------------- slideToggle(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideToggle(500)</div></p>
<p><input id="button14" type="button" value="显示/隐藏div" /></p>
<div id="div8" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button14").click(function(){
$("#div8").slideToggle(500);
});
</script>


<!--------------------------------------- fadeToggle() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeToggle()</div></p>
<p><input id="button15" type="button" value="显示/隐藏div" /></p>
<div id="div9" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button15").click(function(){
$("#div9").fadeToggle();
});
</script>

<!--------------------------------------- fadeTo() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeTo()</div></p>
<p><input id="button16" type="button" value="显示div" />&nbsp;&nbsp;<input id="button17" type="button" value="隐藏div" /></p>
<div id="div10" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button16").click(function(){
$("#div10").fadeTo("slow",0.15);
});
$("#button17").click(function(){
$("#div10").fadeOut();
});
</script>


<p style="height:500px;100%"></p>
</body>
</html>

原文地址:https://www.cnblogs.com/zcwry/p/10011022.html