div 隐藏显示各种例子

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>

<p><div style="font-size:22px;font-weight:bold ;">show()</div></p>
<p><input id="button1" type="button" value="显示div" />  <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>


<p><div style="font-size:22px;font-weight:bold ;">show(500)</div></p>
<p><input id="button3" type="button" value="显示div" />  <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>


<p><div style="font-size:22px;font-weight:bold ;">fadeIn()</div></p>
<p><input id="button5" type="button" value="显示div" />  <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>


<p><div style="font-size:22px;font-weight:bold ;">fadeIn(500)</div></p>
<p><input id="button7" type="button" value="显示div" />  <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>


<p><div style="font-size:22px;font-weight:bold ;">slideDown()</div></p>
<p><input id="button9" type="button" value="显示div" />  <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>


<p><div style="font-size:22px;font-weight:bold ;">slideDown(500)</div></p>
<p><input id="button11" type="button" value="显示div" />  <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>


<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>


<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>


<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>


<p><div style="font-size:22px;font-weight:bold ;">fadeTo()</div></p>
<p><input id="button16" type="button" value="显示div" />  <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>
相关阅读:
C# : WebRequest发起Http Post请求模拟登陆并cookie处理示例
 ASP.NET 缓存数据添加的六种方法。(Insert 与add 的区别)
SQL Server 2005和SQL Server 2000数据的相互导入
 Web：缓存全解析
 Juqery : 漂亮实用的商品图片jquery tips提示框（无图片箭头+阴影）
SQL：存储C#中DateTime类型Ticks的值
 Sql Server2005 TransactSQL 排名函数
 Asp.Net :CheckBoxList用法
 jquery.Ajax() 方法调用Asp.Net 后台方法
 ASP.NET: 缓存运用
原文地址：https://www.cnblogs.com/zcwry/p/10011022.html