1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 /*class=reveal 的元素的子元素都不显示*/ 7 .reveal *{display: none;} 8 .reveal *.handle{display: block;} 9 </style> 10 <title>客户端</title> 11 </head> 12 <body> 13 <script> 14 //所有的页面逻辑在onload事件之后启动 15 window.onload=function(){ 16 //找打所有class名为"reveal"的容器元素 17 var elements=document.getElementsByClassName("reveal"); 18 //对每个元素进行遍历 19 for(var i=0; i<elements.length;i++){ 20 var elt=elements[i]; 21 //找到容器中的handle元素 22 var title=elt.getElementsByClassName("handle")[0]; 23 //当点击这个元素时，呈现剩下的内容 24 addRevealHandler(title,elt); //加载函数 25 } 26 function addRevealHandler(title,elt){ 27 title.onclick=function(){ 28 if(elt.className=="reveal") 29 elt.className="revealed"; 30 else if(elt.className=="revealed") 31 elt.className="reveal"; 32 } 33 } 34 }; 35 </script> 36 <div class="reveal"> 37 <h1 class="handle">点击发生奇怪的事情</h1> 38 <p>惊喜吧意外吧。哈哈</p> 39 </div> 40 </body> 41 </html>