首页 > 网络编程 > JavaScript > javascript技巧 > javascript 闭包

javascript 闭包函数做显隐内容

2009-03-31 00:09:27 作者：

用闭包函数做显隐内容,主要优势就是可以增加显示与隐藏效率。

<!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>

</div> 
<div id="a1" class='aa' style='display:block'> 
爱无忧，我的偶象是果果
 
爱无忧，我的偶象是果果
 
</div> 
<div id="b" title="b1" class='a' > 
<a href='#'>+ 点击显示 </a> 
</div> 
<div id="b1" class='aa'> 
爱无忧，果果我崇拜你
 
爱无忧，果果我崇拜你
 
</div> 
<div id="c" title="c1" class='a' > 
<a href='#'>+ 点击显示 </a> 
</div> 
<div id="c1" class='aa'> 
爱无忧，每天关注偶象果果
 
爱无忧，每天关注偶象果果
 
</div> 
<div id="d" title="d1" class='a' > 
<a href='#'>+ 点击显示 </a> 
</div> 
<div id="d1" class='aa'> 
爱无忧，爱果果
 
爱无忧，爱果果
 
</div> 
<SCRIPT LANGUAGE="JavaScript">

<!-- 
var Each=function (a,fn){for(var i=0;i<a.length;i++)fn.call(a[i],i,a)} 
var $=function(s){return s.charAt?document.getElementById(s):(typeof (s)=='object')?s:null;} 
var Show=function(obj){ 
var divs=[$(obj),'']; 
return function(){

divs.unshift($(this.title)); 
divs.length=2; 
$(this.title).style.display='block'; 
try{divs[1].style.display='none'}catch(e){} 
} 
} 
window.onload=function(){ 
var show = Show('a1'); 
Each(document.getElementsByTagName('div'),function(a,b){ 
if(this.className=='a'){ 
this.onclick=show; 
} 
}) 
} 
//--> 
</SCRIPT> 
</BODY> 
</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 闭包函数做显隐内容

您可能感兴趣的文章: