<!DOCTYPE html>
<html>
<head>
<style>
.reveal*{display:none;}
.reveal*.handle{display:block;}
</style>
<script>
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>求高手告诉怎么没有onlick的效果

解决方案 »

  1.   

    先看看浏览器调试工具里有没有报错,然后检查一遍代码,也许会发现点什么(比如elements.length后面应该是分号而不是冒号)。另外,代码还是写的规范些好~~
      

  2.   

    不知是图上讲的不对,还是你打的不对。你上面的代码错误处不少呀<!DOCTYPE html>
    <html>
    <head>
    <style>
    .reveal *{display:none;}
    .reveal *.handle{display:block;}
    </style>
    <script>
    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><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><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><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><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>
      

  3.   

    Quote: 引用 3 楼 xiaofanku 的回复:

    不知是图上讲的不对,还是你打的不对。你上面的代码错误处不少呀对了下你的,还是没有onclick的效果。
      

  4.   

    有 这个方法?getElementsByClassName
      

  5.   

    有,document,element对象都有这个方法