<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>New Document</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type='text/css'> .a { width: 200px; font-size: 12px; font-weight: bold; height: 30px; line-height: 30px; background: url(/images/default/header_bg.gif); margin-top: 5px; } .a a { text-Decoration: none; } .aa { width: 200px; height: 100px; border: 3px groove #91D2FF; display: none; } </style> </HEAD> <BODY> <!--class=a的点击div,title和下面div的id对应--> <div id="a" title="a1" class='a'> <a href='#'>+ 点击显示 </a> </div> <div id="a1" class='aa' style='display: block'>aaaaaaaaaaaaaaaa</div> <!--class=a的点击div,title和下面div的id对应--> <div id="b" title="b1" class='a'> <a href='#'>+ 点击显示 </a> </div> <div id="b1" class='aa'>bbbbbbbbbbbbbbbbbbbbbb</div> <!--class=a的点击div,title和下面div的id对应--> <div id="c" title="c1" class='a'> <a href='#'>+ 点击显示 </a> </div> <div id="c1" class='aa'>ccccccccccccccccccccc</div> <!--class=a的点击div,title和下面div的id对应--> <div id="d" title="d1" class='a'> <a href='#'>+ 点击显示 </a> </div> <div id="d1" class='aa'>dddddddddddddddddddddd</div> <SCRIPT LANGUAGE="JavaScript"> <!-- var Each = function(a, fn) { for ( var i = 0; i < a.length; i++) //call方法能改变方法调用时this的指向----将每一个div用call传入function变量后,div对象将成为this fn.call(a[i]); } var $ = function(s) { return s.charAt ? document.getElementById(s) : (typeof (s) == 'object') ? s : null; } var Show = function(obj) { //闭包一直操作的数组变量 var divs = [ $(obj), '' ]; return function() { //向divs数组的开头添加新的要显示的div,于是上次显示的div就成为了divs[1] divs.unshift($(this.title)); //在html元素的onclick绑定show以后,this就代表onclick的owner---html元素本身 console.log(divs); divs.length = 2; $(this.title).style.display = 'block'; try { //隐藏上次显示的div divs[1].style.display = 'none'; } catch (e) { } } } window.onload = function() { var show = Show('a1'); Each(document.getElementsByTagName('div'), function(a, b) { //给每个class=a的div绑定show函数,show函数又返回一个内部函数的变量。 //于是,每一个匿名函数的变量都被外界第三者(即div)引用着,所以方法执行外之后它不会被销毁,而且它从属的show方法的变量也同样没有被销毁,进而show方法的divs数组变量就也没有被销毁, //由此形成闭包-----使外界可以操作show函数内部的divs数组,并让divs数组的值始终保持在内存中。 //于是,这样就能够用一份数组一直记录着当前显示的div,然后点击显示下一个div时,再用新的去覆盖旧的,由此来实现功能。 //这个代码这么写的目的应该是: //1.可以有针对性地对要隐藏的div进行单独操作。老套的做法是:当一个显示,就隐藏所有其他的。如果是较庞大的页面的话,这样操作效率就不高了。 //2.将divs数组封装了起来,避免了外界对它的误操作。 //3.能显得自己比较高深,哈哈,开下玩笑。 if (this.className == 'a') { this.onclick = show; } }) } //--> </SCRIPT> </BODY> </HTML>
代码的原址: http://www.jb51.net/article/17628.htm