<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. 如何练习打字之用英文写文章 & 如何调养右手之用左手握鼠标

    part1:how to practise your typing via writing a English blog it's easy to write english for chinese. ...

  2. python turtle库的几个小demo

    一.先上图 一个同切圆和五角星 上代码 import turtle #同切圆 turtle.pensize(2) turtle.circle(10) turtle.circle(40) turtle. ...

  3. python学习博客地址集合。。。

    python学习博客地址集合...   老师讲课博客目录 http://www.bootcdn.cn/bootstrap/  bootstrap cdn在线地址 http://www.cnblogs. ...

  4. lvs，nginx反向代理，虚拟主机

    LVS NAT 拓扑 client | | LVS | | ------------------- | | | RS1 RS2 RS3 地址规划如下 机器名称 ip配置 ip配置 备注信息 LVS 1 ...

  5. 解决Python图片处理模块pillow使用中出现的问题

    最近爬一个电影票房的网站(url:http://58921.com/alltime),上面总票房里面其实是一张图片,那么我需要把图片识别成文字,来获取票房数据.   我头脑里第一想到的解决方案就是要用 ...

  6. 使用lamdba函数对list排序

    lamdba好处:精简代码,省去了定义函数.

  7. F2833x 调用DSP函数库实现复数的FFT的方法

    转载自:http://blog.csdn.net/aeecren/article/details/67644363:个人觉得写的很详细,值得一看 在数字信号处理中,FFT变换是经常使用到的,在DSP中 ...

  8. JavaWeb笔记三、MVC 设计模式

    一.通过 MVC 进行查询和删除操作 1. 准备一个数据表(examstudent) 2. 创建一个 查询 页面(test.jsp) 通过连接进入 Servlet(listAllStudents.ja ...

  9. L1-035 情人节 （15 分）

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805097018540032 以上是朋友圈中一奇葩贴:“2月14 ...

  10. 关于redis实现分布式锁

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...