其实改这个菜单并不难，把全局变量改成this或用参数传递对象就可以了，唯一的难度在于 setTimeout不支持把对象作为参数传递，最后是用了阿信blog的一个方法重写setTimeout解决的，有兴趣可以看看http://blog.csdn.net/fason/archive/2004/07/30/56393.aspx
其中选项卡的效果来自蓝色理想http://www.blueidea.com/tech/web/2006/3599_2.asp
完整代码如下（不支持FF）：
< html > < head > < title > 支持多个outlookbar的版本 </ title > <!-- Modify by showlin 2007, http://blog.csdn.net/showlin --> < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" > < style type ="text/css" > ... A:link {...}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}A:visited {...}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}A:hover {...}{ COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}body,table,tr,td{...}{ font-size:12px; color:#000000; line-height: 150% } body{...}{margin:0 0 0 0;}.sec1 {...}{ background-color: #e5e8ef; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF }.sec2 {...}{ background-color:#3399FF; cursor: hand; color: #FFFFFF; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF font-weight: bold; }.main_tab {...}{ background-color: #f0f0f0; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </ style > < script language ="javascript" > ... <!--var _st = window.setTimeout;window.setTimeout = function(fRef, mDelay) ...{ if(typeof fRef == 'function')...{ var argu = Array.prototype.slice.call(arguments,2); var f = (function()...{ fRef.apply(null, argu); }); return _st(f, mDelay); } return _st(fRef,mDelay);}function secBoard(n,x,y)...{ for(i=0;i<secTable.cells.length;i++)...{ secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2";} for(i=0;i<mainTable.tBodies.length;i++)...{ mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block";}// weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅";}//--> </ script > </ head > < body bgcolor ="#FFFFFF" text ="#000000" leftmargin ="0" topmargin ="0" > < script language ="JavaScript" > ... <!--function showitem(id,name,target,image)...{ var temp; if (id=="javascript:void(0);") temp="<span><a href='"+id+"' οnclick="+target+">"+name+"</a></span><br>" else temp="<span><a href='"+id+"' target="+target+">"+name+"</a></span><br>" if (image) temp="<img src="" + image + "" border="0" align="absmiddle" hspace="5" vspace="5">" + temp; return (temp)}function switchout1(out1,number)...{ // alert(out1.id); var i = out1.opentitle; out1.opentitle=number; var id1,id2,id1b,id2b if (number!=i && out1.outlooksmoothstat==0)...{ if (number!=-1) ...{ if (i==-1)...{ id2=out1+"_blankdiv"; id2b=out1+"_blankdiv"; } else...{ id2=out1.id + "_div"+i; id2b=out1.id + "_divin"+i; document.all(out1.id + "_title"+i).style.border="1px none navy"; document.all(out1.id + "_title"+i).style.background=out1.maincolor; document.all(out1.id + "_title"+i).style.color="#ffffff"; document.all(out1.id + "_title"+i).style.textalign="center"; } id1=out1.id + "_div"+number id1b=out1.id + "_divin"+number document.all(out1.id + "_title"+number).style.border="1px none white"; document.all(out1.id + "_title"+number).style.background=out1.maincolor; //title document.all(out1.id + "_title"+number).style.color="#ffffff"; document.all(out1.id + "_title"+number).style.textalign="center"; smoothout(id1,id2,id1b,id2b,0,out1); } else ...{ document.all(out1.id + "_blankdiv").style.display=""; document.all(out1.id + "_blankdiv").sryle.height="100%"; document.all(out1.id + "_div"+i).style.display="none"; document.all(out1.id + "_div"+i).style.height="0%"; document.all(out1.id + "_title"+i).style.border="1px none navy"; document.all(out1.id + "_title"+i).style.background=out1.maincolor; document.all(out1.id + "_title"+i).style.color="#ffffff"; document.all(out1.id + "_title"+i).style.textalign="center"; } }}function smoothout(id1,id2,id1b,id2b,stat,obj)...{ if(stat==0)...{ obj.tempinnertext1=document.all(id1b).innerHTML; obj.tempinnertext2=document.all(id2b).innerHTML; document.all(id1b).innerHTML=""; document.all(id2b).innerHTML=""; obj.outlooksmoothstat=1; document.all(id1b).style.overflow="hidden"; document.all(id2b).style.overflow="hidden"; document.all(id1).style.height="0%"; document.all(id1).style.display="";// setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+out1.inc+")",out1.timedalay); setTimeout(smoothout,obj.timedalay,id1,id2,id1b,id2b,obj.inc,obj); } else ...{ stat+=obj.inc; if (stat>100) stat=100; document.all(id1).style.height=stat+"%"; document.all(id2).style.height=(100-stat)+"%"; if (stat<100) // setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",out1.timedalay); setTimeout(smoothout,obj.timedalay,id1,id2,id1b,id2b,stat,obj); else ...{ document.all(id1b).innerHTML=obj.tempinnertext1; document.all(id2b).innerHTML=obj.tempinnertext2; obj.outlooksmoothstat=0; document.all(id1b).style.overflow="auto"; document.all(id2).style.display="none"; } }}function getOutLine()...{ outline="<table "+this.otherclass+">"; for (i=0;i<(this.titlelist.length);i++) ...{// outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" " + "index=" + i + " "; outline+="<tr><td name=" + this.id + "_title"+i+" id=" + this.id + "_title"+i+" " + "index=" + i + " "; if (i!=this.opentitle) outline+=" nowrap align=center style='cursor:hand;background-color:"+this.maincolor+";color:#ffffff;height:20;border:1 none navy' "; else outline+=" nowrap align=center style='cursor:hand;background-color:"+this.maincolor+";color:white;height:20;border:1 none white' "; outline+=this.titlelist[i].otherclass// outline+=" οnclick='switchout1("+i+")'" outline+="><span class=smallFont>"; outline+=this.titlelist[i].title+"</span></td></tr>"; outline+="<tr><td name=" + this.id +"_div"+i+" id=" + this.id + "_div"+i+ " " + this.tdclass if (i!=this.opentitle) outline+=";display:none;height:0%;"; else outline+=";display:;height:100%;"; outline+="'><div name=" + this.id + "_divin"+i+" id=" + this.id + "_divin"+i+" style='overflow:auto;width:100%;height:100%'>"; for (j=0;j<this.itemlist[i].length;j++) outline+=showitem(this.itemlist[i][j].key,this.itemlist[i][j].title,this.itemlist[i][j].target,this.itemlist[i][j].image); outline+="</div></td></tr>" } outline+="</table>" return outline}function show()...{ var outline; outline="<div id=" + this.id + "name=" + this.id + " style='width=100%;height:100%'>" outline+=this.getOutLine(); outline+="</div>" document.write(outline); addclick(this);}function addclick(obj)...{ var i,tempobj; var out1=obj; for (i=0;i<(obj.titlelist.length);i++)...{ var tempobj=document.getElementById(out1.id + "_title"+i); tempobj.onclick=function()...{ switchout1(out1,this.index); } }}function theitem(intitle,instate,inkey,intarget,image)...{ this.state=instate; this.otherclass=" nowrap "; this.key=inkey; this.title=intitle this.target=intarget; this.image=image;}function addtitle(intitle)...{ this.itemlist[this.titlelist.length]=new Array(); this.titlelist[this.titlelist.length]=new theitem(intitle,1,0,"",""); return(this.titlelist.length-1);}function additem(intitle,parentid,inkey,intarget,image)...{ if (parentid>=0 && parentid<=this.titlelist.length) ...{ this.itemlist[parentid][this.itemlist[parentid].length]=new theitem(intitle,2,inkey,intarget,image); this.itemlist[parentid][this.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' "; return(this.itemlist[parentid].length-1); } else additem=-1;}function outlook(id)...{ this.id=id; this.titlelist=new Array(); this.itemlist=new Array(); this.divstyle="style='height:100%;width:100%;overflow:auto' align=center"; this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%' valign=middle align=left "; this.addtitle=addtitle; this.additem=additem; this.starttitle=-1; this.show=show; this.getOutLine=getOutLine; this.opentitle=this.starttitle; this.reflesh=outreflesh; this.timedelay=1000; this.inc=10; this.maincolor = "#336699"; this.tdclass=" valign=top align=left style='padding-left:10px;width:100%"; this.tempinnertext1=""; this.tempinnertext2=""; this.outlooksmoothstat=0;}function outreflesh()...{ document.all(this.id).innerHTML=this.getOutLine();}function locatefold(obj,foldname) //定位到某个title...{ if (foldname=="") foldname = obj.titlelist[0].title for (var i=0;i<obj.titlelist.length;i++) ...{ if(foldname==obj.titlelist[i].title) ...{ obj.starttitle=i; obj.opentitle=i; } }}//--> </ script > < table width ="170" border ="0" cellspacing ="1" cellpadding ="4" align ="center" height =100% > < tr > < td height ="4" ></ td > </ tr > < tr > < td > < table border =0 cellspacing =0 cellpadding =0 width =100% id =secTable > < tr height =20 align =center > < td class =sec2 width =10% onClick ="secBoard(0,'a','1')" > 菜单1 </ td > < td class =sec1 width =10% onClick ="secBoard(1,'a','2')" > 菜单2 </ td > < td class =sec1 width =10% onClick ="secBoard(2,'b','1')" > 菜单3 </ td > </ tr > </ table > < table border =0 cellspacing =0 cellpadding =0 width =100% id =mainTable class =main_tab height =90% > < tbody style ="display:block;" > < tr > < td align ="center" height =100% > < script > ... var out1=new outlook("out1");var t;t=out1.addtitle('项目1')out1.additem('带图片链接1',t,'http://blog.csdn.net/showlin/','_target','images/new/diary.gif')out1.additem('文字链接2',t,'abc.html','mainFrame')t=out1.addtitle('项目2')out1.additem('onclick事件',t,'javascript:void(0);','alert(1);')locatefold(out1,"项目1");out1.show() </ script > </ td > </ tr > </ tbody > < tbody style ="display:none;" > < tr > < td align ="center" > < script > ... var out2=new outlook("out2");var t2;t2=out2.addtitle('项目3')out2.additem('带图片链接2',t2,'http://blog.csdn.net/showlin/','_target','images/new/diary.gif')out2.additem('带图片链接3',t2,'def.asp','mainFrame','images/new/webmail.gif')t2=out2.addtitle('项目4')out2.additem('打开新窗口',t2,'javascript:void(0);','window.open("abc.html","","width=300,height=200")')locatefold(out2,"项目4");out2.show() </ script > </ td > </ tr > </ tbody > < tbody style ="display:none;" > < tr > < td align ="center" > 待用 </ td > </ tr > </ tbody > </ table > </ td > </ tr > </ table >
