<!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
分享到：
相关推荐
关于”闭包”这个概念的...以上是一段非常简单的代码，当函数执行结束之后，它就会从内存中释放，里面的声明的局部变量也将在内存中被释放，自然就无法被访问，在网上很多例子中，大多涉及到了作用域问题，其实一旦涉及
v-if和v-show的区别，使用场景区别、组件中的data为什么是函数,new Vue 实例里，data 可以直接是一个对象computed和watch的区别是什么怎么理解vue中的虚拟DOM怎么理解vue的生命周期vue 钩子函数有哪些，有哪些使用的...
我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们直接进入主题吧! 注意,...
本书的特色有二，旨在提高读者的问题求解能力，使读者能够理解算法设计的过程和思想：一是强调算法设计的创造性过程，注重算法设计背后的创造性思想，而不拘泥于某个具体算法的详细讨论；二是将算法设计类比于定理...
如前所述，我是一个狮子座男人，一度我认为学习Java会使我看起来与众不同，可是几个月以后我放弃了这个选择，我看了论坛里关于这两种语言孰优孰劣的讨论，最终选择了C#，请不要问我为何做出这样的选择，很多人认为...
5.2.1 二次缩放（Quadratic Scaling）的一个例子 5.2.2 具有线性复杂度的算法 5.2.3 指数和超指数复杂度 5.2.4 次线性（sublinear）复杂度 5.2.5 常量复杂度 5.2.6 复杂度的技术定义 5.2.7 复杂度的比较 5.3 ...
5.2.1 二次缩放（Quadratic Scaling）的一个例子217 5.2.2 具有线性复杂度的算法218 5.2.3 指数和超指数复杂度218 5.2.4 次线性（sublinear）复杂度219 5.2.5 常量复杂度219 5.2.6 复杂度的技术定义220 5.2.7 复杂度...
5.2.1 二次缩放（Quadratic Scaling）的一个例子217 5.2.2 具有线性复杂度的算法218 5.2.3 指数和超指数复杂度218 5.2.4 次线性（sublinear）复杂度219 5.2.5 常量复杂度219 5.2.6 复杂度的技术定义220 5.2.7 ...
想写出高效的javascript类库却无从下手； 尝试阅读别人的类库，却理解得似懂给懂； 打算好好钻研js高级函数，但权威书上的内容太零散， ...例子都被调试过，理解过后，我想把一些“深奥”的道理说得浅显
这里所说的空值,实际上也包括那些并不存在的变量,对于一个Java的 null值而言,我们认为这个变量是存在的,只是它的值为null,但对于FreeMarker模板而言,它无法理解null值,null值和不存在的变 量完全相同. 为了处理缺失...