<!DOCTYPE html>
<html>
  <head>
<style type="text/css">
.reveal * {display: none;}
.reveal * .handle {display: block;}
</style>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--   <script src="13-1.js"></script>  -->   
<script type="text/javascript">
window.onload=function(){
var elements=document.getElementsByClassName("reveal");
for(var i=0;i<elements.length;i++){
var elt=elements[i];
var title=elt.getElementsByClassName("handle")[0];
addRevealHandler(title,elt);}
function addRevealHandler(title,elt){
title.onclick=function(){
if(elt.className=="reveal")
{ elt.className="revealed";}
else if(elt.className=="revealed")
{ elt.className=="reveal";}
}
}
};
</script>
      </head>
  
  <body>
    <div class="reveal">
    <h1 class="handle">Click Here to Reveal Hidden Text</h1>
    <p>This paragraph is hidden.It appears when you Click on the title.</p>
    </div>
  </body>
</html>
要打到预期的效果,可我这边没有显示啊,怎么办?

解决方案 »

  1.   

    IE下不支持document.getElementsByClassName方法
      

  2.   

    getElementsByClassName这个方法ie并不支持,其他浏览器不太清楚,多半也是不支持的可以自己添加这个函数Element.prototype.getElementsByClassName=function(className)
    {
       var objs=this.getElementsByTagName("*");
       var result=new Array();
       for(var i=0;i<objs.length;i++)
       {
         result.push(objs[i]);
       }
       return result;
    }把这段代码放到前面再试试
      

  3.   

    else if(elt.className=="revealed")
     { elt.className=="reveal";}这个地方写错了哦~~改正这个地方还是不能打到效果的话,就要考虑CSS部分的问题了,我改动了一点,测试的,就是不知道你要的效果是什么样子的.reveal{
    //display:none;
    }
    .reveal p{
    display:none;
    }
    .revealed{}