<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;width:100%"></p>
</body>
</html>

div 隐藏显示各种例子的更多相关文章

  1. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  2. div的显示和隐藏

    本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...

  3. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  4. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  5. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  6. 利用JS做到隐藏div和显示div

    div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById( ...

  7. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  8. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  9. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

随机推荐

  1. 【性能测试】LoadRunner11安装（包含破解、汉化）

    LoadRunner安装(包含破解.汉化) 安装LoadRunner a.以解压包的方式打开[性能测试工具LR11.00].loadrunner-11.iso文件,运行“setup.ext”(花费时间 ...

  2. oracle权限列表

    alter any cluster 修改任意簇的权限 alter any index 修改任意索引的权限 alter any role 修改任意角色的权限 alter any sequence 修改任 ...

  3. JS变量的提升详解

    此次说明的是var与function的变量提升 那么先看一段代码 <script type="text/javascript"> console.log(test); ...

  4. 洛谷P1073 最优贸易

    题面要求的是一个差值,即走过一条路径能找到的路径上最大值-最小值. 那么相当于跑一遍最长路和一遍最短路,当然不是概念上的最长路最短路,这里把dis[v]的松弛改成用路径上传递来的最大/最小值维护,而不 ...

  5. C# Global.asax.cs 定时任务

    定时执行更新Redis缓存操作 protected void Application_Start(object sender, EventArgs e) { Timer timer = new Tim ...

  6. java -jar启动java项目时，引用不同配置文件命令

    java -jar eureka-server.jar --spring.profiles.active=peer1

  7. 执行git命令时出现fatal: 'origin' does not appear to be a git repository错误

    在执行git pull origin master时出现: fatal: 'origin' does not appear to be a git repository fatal: Could no ...

  8. 设置tomcat支持软连接

    一般开发时不会在tomcat安装目录/data/tomcat/webapps/ROOT 下去,上传部署:而是建立软连接,在tomcat安装目录之外操作,比如执行git pull拉取项目,而tomcat ...

  9. 完全关闭及再次启动cdh集群

    关闭集群 - 关闭集群所有组件 关闭Cloudera Management Service 关闭cdh所有客户端节点 sudo /opt/cloudera-manager/cm-5.11.1/etc/ ...

  10. 基于centos6.5安装部署mongdb3.6

    注意:不同的版本的centos,mongdb安装方式不同,请注意版本号!! 基于centos6.5安装部署mongdb3.6 方式有多种,本文介绍使用wget命令来下载获取mongdb,具体命令如下 ...