<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. 程序员必会算法-KMP算法

    KMP算法是一种优秀的字符串匹配算法,字符串匹配的常规算法是一步一步进行移位和比较操作,直至找到完全相匹配的字符串. 下面通过一个例子,为大家仔细说明KMP算法的使用和思路: 问题: 在字符串“DEA ...

  2. Excel关联xml文件

    1.新建没传值的xml文件,变量名称自己定义好 2.打开excel,如果之前没有设置过,点击选项 如果当前Excel菜单栏中没有开发工具项,在自定义功能区先勾选上开发选项 3.点右下角的xml映射 弹 ...

  3. CodeForces - 1101B

    题目: B. Accordion time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...

  4. windwos安装docker步骤

    参考 https://www.linuxidc.com/Linux/2016-07/133506.htm

  5. datatable 添加列之前判断是否存在该列

    if (!dt.Columns.Contains("BDate")) { DataColumn dc1 = new DataColumn("BDate", ty ...

  6. canvas初体验

    利用画布,绘制随机大小,颜色,位置 方框<!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. spring不走注解的原因

    在配置文件中没有扫描配置注解的类,导致自定义的注解无法被识别,所以不会走,检查配置文件,修改即可

  8. angular $resouse服务

    创建服务 var taskInstancesResource = function ($resource) { var resource = $resource('/ssc-cutover/rest/ ...

  9. SpringIOC容器装配Bean

    Spring 的core Container(Spring的核心容器)有四大部分:bean.context.core.expression 在进行Bean的配置时候,需要添加四个jar包 如下: 分别 ...

  10. nc/netcat命令

    nc/netcat命令 语法 nc/netcat(选项)(参数) 选项 -g<网关>:设置路由器跃程通信网关,最多设置8个: -G<指向器数目>:设置来源路由指向器,其数值为4 ...