每当不经意间打开某一个页面，会发现一个出现的页面过了几秒就消失了，或者说，当你点击某个按钮，它才会出现，然后它也会提示你也可以把它关闭掉，再或者说，当你阅读了我的博客摘要后，开始有了想要阅读整篇文章的想法，于是点击阅读全文，它又以“收起全文”的模样再次出现在你的眼前。。。。这便是本篇博客的主题----隐藏与显示。
下面我将效果图展示出来：
1，通过按钮实现隐藏与显示：
这个是通过按钮点击实现的隐藏与显示，具体代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>通过按钮实现隐藏和显示</title> 6 <style type="text/css"> 7 .body{ 8 margin: 0 auto; 9 } 10 #show{ 11 width: 600px; 12 height: auto; 13 font-size: 14px; 14 background-color: #E4C392; 15 display: block; 16 padding: 10px; 17 margin: 0 auto; 18 border-radius: 10px; 19 } 20 #show h2{ 21 color: #11C2EE; 22 margin: 0 auto; 23 } 24 .slide{ 25 margin: 0 auto; 26 padding: 0; 27 width: 600px; 28 border-top: solid 4px #D6A55C; 29 } 30 .btn-slide{ 31 background-color: bisque; 32 width: 80px; 33 height:30px; 34 text-align: center; 35 margin: 0 auto; 36 border-radius: 8px; 37 margin: 0 auto; 38 display: block; 39 } 40 </style> 41 <script type="text/javascript"> 42 function divShow(){ 43 document.getElementById("btnshow").style.display="block"; 44 document.getElementById("btnhref").innerHTML ="关闭"; 45 document.getElementById("btnhref").href ="javascript:divhidden()"; 46 } 47 function divhidden(){ 48 document.getElementById("btnshow").style.display="none"; 49 document.getElementById("btnhref").innerHTML ="了解"; 50 document.getElementById("btnhref").href ="javascript:divShow()"; 51 } 52 </script> 53 </head> 54 <body> 55 <div id="show"> 56 <h2>通过点击按钮实现隐藏和显示</h2> 57 <hr /> 58 <p> 59 欢迎来到我的博客Jaxzm! 60 </p> 61 <p> 62 目前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。 63 </p> 64 <div id="btnshow" style="display: none;"> 65 <p> 66 GoF所描述的23种设计模式，总共可以分为三种类型：创建型模式，行为型模式，结构型模式。 67 </p> 68 <p> 69 我觉得比较难的是创建型模式，因为它说的比较抽象，所以我不容易理解它，然后我编码也比较少，所以就不太容易理解这个。 70 </p> 71 </div> 72 </div> 73 <p class="slide"> 74 <a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a> 75 </p> 76 </body> 77 </html>
其中，主要能够实现这个功能的是js代码，
通过getElementById()这个方法找到对应元素，进而控制它的style，以此来做对应的功能。这是一个比较简单的方法。
接下来演示的是另外一种方式：
这个是通过具体的时间限制来控制其隐藏与显示，
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>通过定时实现隐藏和显示</title> 6 <style type="text/css"> 7 .body{ 8 margin: 0 auto; 9 padding: 0; 10 background-color: #D6A55C; 11 } 12 #show{ 13 background-color: #E4C392; 14 width: 700px; 15 height: 100px; 16 display: block; 17 margin: 0 auto; 18 padding: 10px; 19 font-size: 14px; 20 height: auto; 21 text-align: center; 22 } 23 24 #show h2{ 25 color: #3CC4A9; 26 } 27 .hid{ 28 background: #E8E8E8; 29 text-align: center; 30 width: 700px; 31 height: 100px; 32 padding: 10px 10px 0 0; 33 margin: 0 auto; 34 display: block; 35 text-decoration: none; 36 } 37 38 </style> 39 40 <script type="text/javascript"> 41 var h = 0; 42 function addH(){ 43 if(h < 400){ 44 h=h+5; 45 document.getElementById("show").style.height = h+"px"; 46 } 47 else{ 48 return; 49 } 50 setTimeout("addH()",30); 51 } 52 window.onload = function showAds(){ 53 addH(); 54 setTimeout("subH()",5000); 55 } 56 57 function subH(){ 58 if(h >0){ 59 h -= 5; 60 document.getElementById("show").style.height = h+"px"; 61 } 62 else{ 63 document.getElementById("show").style.display = "none"; 64 return; 65 } 66 setTimeout("subH()",30); 67 } 68 69 </script> 70 </head> 71 <body> 72 <div id="show"> 73 <h2>Jaxzm欢迎您的访问</h2> 74 <span>此茶虽未饮，未闻，我心自生香.</span> 75 </div> 76 <div class="hid"> 77 <h1>Jaxzm欢迎您的访问</h1> 78 </div> 79 80 </div> 81 82 </body> 83 </html>
注意在这个js里面的setTimeout()函数，setTimeout(function,time).更加精准地用法：
执行一段代码：
var i=0;
setTimeout("i+=1;alert(i)",1000);
执行一个函数：
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);
还有一种方式就是通过jQuery方法来实现，通过切换实现隐藏与显示；效果如下：
看到它的样子，是否会觉得和第一个很像，但是也会发现它和第一个是不一样的，具体代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>通过jQuery实现展开收缩</title> 6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 7 <style type="text/css"> 8 .body{ 9 margin: 0 auto; 10 } 11 #show{ 12 width: 600px; 13 height: auto; 14 font-size: 14px; 15 background-color: #E4C392; 16 display: block; 17 padding: 10px; 18 margin: 0 auto; 19 border-radius: 10px; 20 } 21 #show h2{ 22 color: #11C2EE; 23 margin: 0 auto; 24 } 25 .slide{ 26 margin: 0 auto; 27 padding: 0; 28 width: 600px; 29 border-top: solid 4px #D6A55C; 30 } 31 .btn-slide{ 32 background-color: bisque; 33 width: 80px; 34 height:30px; 35 text-align: center; 36 margin: 0 auto; 37 border-radius: 8px; 38 margin: 0 auto; 39 display: block; 40 } 41 </style> 42 <script type="text/javascript"> 43 $(document).ready(function () { 44 $(".btn-slide").click(function () { 45 $("#btnshow").slideToggle(); 46 }); 47 }); 48 49 </script> 50 </head> 51 <body> 52 <div id="show"> 53 <h2>通过jQuery代码实现隐藏和显示</h2> 54 <hr /> 55 <p> 56 欢迎来到我的博客Jaxzm! 57 </p> 58 <p> 59 目前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。 60 </p> 61 <div id="btnshow" style="display: none;"> 62 <p> 63 GoF所描述的23种设计模式，总共可以分为三种类型：创建型模式，行为型模式，结构型模式。 64 </p> 65 <p> 66 我觉得比较难的是创建型模式，因为它说的比较抽象，所以我不容易理解它，然后我编码也比较少，所以就不太容易理解这个。 67 </p> 68 </div> 69 </div> 70 <p class="slide"> 71 <a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a> 72 </p> 73 </body> 74 </html>
这段代码和第一个唯一不同的便是这个js代码：
这里首先要引入jQuery库，然后才能调用jquery库里面的方法slideToggle(),方法的具体实现如下：
当点击了按钮，它就会将显示与隐藏进行切换。
学习了以上知识之后，就可以实现博客的页面显示。但是这里还需要了解nextSibling和previousSiling这两个属性。
nextSibling 它是返回某一元素后面紧跟的元素。previousSibling 它是返回某一元素之前紧跟的元素。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>鼠标控制动画展开</title> 6 <style type="text/css"> 7 body 8 { 9 margin: 0 auto; 10 padding: 0; 11 font-size: 9pt; 12 line-height: 180%; 13 } 14 15 #pn 16 { 17 background: #f8f8f8; 18 height: auto; 19 width: 750px; 20 display: block; 21 margin: 0 auto; 22 padding: 5px; 23 } 24 25 26 .btn 27 { 28 width: 80px; 29 height: 20px; 30 padding: 5px 3px 5px 3px; 31 text-align: center; 32 text-decoration: none; 33 background: #f0f0f0; 34 border: 1px solid #CCC; 35 } 36 .content 37 { 38 border: 1px solid #CCC; 39 display: none; 40 padding: 5px; 41 } 42 .title 43 { 44 font-weight: bold; 45 color: #3030FF; 46 font-size:11pt; 47 } 48 .subtitle 49 { 50 color: #CCC; 51 } 52 .btm 53 { 54 text-align: right; 55 height: 30px; 56 } 57 </style> 58 <script type="text/javascript"> 59 var time = 300; 60 var h = 40; 61 function showdiv(obj) { 62 63 //obj.parentNode.nextSibling.nextSibling.style.display = "block"; 64 var x = obj.parentNode.nextSibling; 65 //包含众多空格作为文本节点，因此在我们使用nextSibling和previousSibling时就会出现问题。 66 //因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。 67 //当上一节点或者是下一节点为文本节点时，就继续寻找，直到找到下一个元素节点。 68 // 其中nodeType的值主要有以下几种： 69 // 70 // 元素节点的nodeType值为1 71 // 属性节点的nodeType值为2 72 // 文本节点的nodeType值为3 73 if (x.nodeType != 1) { 74 x = x.nextSibling; 75 } 76 x.style.display = "block"; 77 obj.parentNode.style.display = "none"; 78 79 } 80 function hidediv(obj) { 81 82 obj.parentNode.parentNode.style.display = "none"; 83 var x = obj.parentNode.parentNode.previousSibling; 84 if (x.nodeType != 1) { 85 x = x.previousSibling; 86 } 87 x.style.display = "block"; 88 } 89 90 </script> 91 </head> 92 <body> 93 <div id="pn"> 94 <div> 95 <p class="title"> 96 原生js实现tooltip提示框的效果</p> 97 <p class="subtitle"> 98 2016年11月13日 </p> 99 <p> 100 摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。 101 前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。 102 比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。 103 比如这个tooltip的效果展示： 这个便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a> 104 </p> 105 <div class="content"> 106 <p>摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。 107 前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。 108 比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。 109 比如这个tooltip的效果展示： 这个便是tooltip提示框的效果。</p> 110 <p>工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。 111 您可以有以下两种方式添加工具提示（tooltip）： 112 <p>通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。 113 锚的 title 即为工具提示（tooltip）的文本。</p> 114 默认情况下，插件把工具提示（tooltip）设置在顶部。 </p> 115 <div class="btm"> 116 <a href="#" class="btn" onclick="hidediv(this);">收起全文</a> 117 </div> 118 </div> 119 <hr /> 120 <div> 121 <p class="title"> 122 原生js实现tooltip提示框的效果</p> 123 <p class="subtitle"> 124 2016年11月13日 </p> 125 <p> 126 摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。 127 前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。 128 比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。 129 比如这个tooltip的效果展示： 这个便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a> 130 </p> 131 <div class="content"> 132 <p>摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。 133 前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。 134 比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。 135 比如这个tooltip的效果展示： 这个便是tooltip提示框的效果。</p> 136 <p>工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。 137 您可以有以下两种方式添加工具提示（tooltip）： 138 <p>通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。 139 锚的 title 即为工具提示（tooltip）的文本。</p> 140 默认情况下，插件把工具提示（tooltip）设置在顶部。 </p> 141 <div class="btm"> 142 <a href="#" class="btn" onclick="hidediv(this);">收起全文</a> 143 </div> 144 </div> 145 </div> 146 </body> 147 </html>
效果如下:
是否感觉似曾相识？
其实以上方法具体实现起来都是比较简单的。实用性也比较大。