<!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
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
