菜鸟JS求助

这段代码只实现了选项卡切换的功能，现在想在第二个按钮上也就是规划工程库上做个2级菜单，然后点击2级菜单在进行窗体的切换。。希望大哥们帮忙指点~ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>井底的蛙</title> 
<script type="text/javascript"> 
/* 
选项卡封装 
by 井底的蛙 
2008-2-4 
*/ 
opCard = function() 
{ 
this.bind = new Array(); 
this.index = 0; //默认显示哪个选项卡，从0开始 this.style = new Array(); //["","",""] 
this.overStyle = false; //选项是否有over, out变换样式事件，样式为this.style[2] 
this.overChange = false; //内容是否用over, out直接激活 
this.menu = false; //菜单类型 
this.nesting = [false,false,"",""]; //是否嵌套，后面2个参数是指定menu,info的子集深度所用id this.auto = [false, 1000]; //自动滚动[true,2000] 
this.timerID = null; //自动播放的 
this.menutimerID = null; //菜单延时的 this.creat = function(func) 
{ 
var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]); 
var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]); 
var my = this, i; 
var argLen = arguments.length; 
var arrM = new Array(); if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套 
{ // 过滤出需要的数据 
var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu; 
var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo; 
} 
else 
{ 
var arrMenu = _arrMenu; 
var arrInfo = _arrInfo; 
} var l = arrMenu.length; 
//if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")} // 修正 
if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活 // 循环添加各个事件等 
for(i=0;i<l;i++) 
{ 
arrMenu[i].cName = arrMenu[i].className; 
arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式，菜单的话统一样式 if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器 
{ 
if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活 
{ 
arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} 
arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} 
} 
arrMenu[i].onclick = function(){if(argLen==1){func()}} 
arrInfo[i].style.display = "none"; 
continue; 
} if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化，菜单的话全部隐藏 
arrMenu[i].index = i; //记录自己激活值[序号] 
arrInfo[i].index = i; 
if(this.overChange) //有鼠标over, out事件 
{ 
arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);} 
arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);} 
} 
else //onclick触发 
{ 
arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}} 
if(this.overStyle) // 有over, out 改变样式 
{ 
arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} 
arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} 
} 
else // 没有over, out 改变样式 
{ 
if(this.auto[0]) // 有自动运行 
{ 
arrMenu[i].onmouseover = function(){autoStop(this, 0);} 
arrMenu[i].onmouseout = function(){autoStop(this, 1);} 
} 
} 
} if(this.auto[0] || this.menu) //arrinfo 控制自动播放 
{ 
arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);} 
arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);} 
} 
} //for结束 if(this.auto[0]) 
{ 
this.timerID = setTimeout(autoMove,this.auto[1]) 
} // 自动播放 
function autoMove() 
{ 
var n; 
n = my.index + 1; 
if(n==l){n=0}; 
while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器 
{ 
n += 1; 
if(n==l){n=0}; 
} 
changeOption(arrMenu[n]); 
my.timerID = setTimeout(autoMove,my.auto[1]); 
} // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!! 
function autoStop(obj, num) 
{ 
if(!my.auto[0]){return;} 
//if(obj.index==my.index) 
num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]); 
} // 改变选项卡 
function changeOption(obj) 
{ 
arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容 
arrInfo[my.index].style.display = "none"; //隐藏旧内容 obj.className = getClass(obj,my.style[1]); //修改为新样式 
arrInfo[obj.index].style.display = ""; //显示新内容 my.index = obj.index; //更新当前选择的index 
} /* 
只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活 
obj：目标对象。 num：1为over，0为out 
*/ 
function changeTitle(obj, num) 
{ 
if(!my.overStyle){return;}; 
if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])} 
} /* 
菜单类型时用 
obj：目标对象。 num：1为over，0为out 
*/ 
function changeMenu(num) 
{ 
if(!my.menu){return;} 
num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) 
} //关闭菜单 
function menuClose() 
{ 
arrInfo[my.index].style.display = "none"; 
arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); 
} // 得到className（防止将原有样式覆盖） 
function getClass(o, s) 
{ 
if(o.cName==""){return s} 
else{return o.cName + " " + s} 
} //嵌套情况下得到真正的子集 
function getChilds(arrObj, id, num) 
{ 
var depth = 0; 
var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集 
do //计算深度 
{ 
if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1} 
firstObj = firstObj.parentNode; 
} 
while(firstObj.tagName.toLowerCase()!="body") // body强制退出。 var t; 
var arr = new Array(); 
for(i=0;i<arrObj.length;i++) //过滤出需要的数据 
{ 
t = arrObj[i], d = 0; 
do 
{ 
if(t.parentNode.getAttribute("id")==id && d == depth) 
{ 
arr.push(arrObj[i]);break; //得到数据 
} 
else 
{ 
if(d==depth){break};d+=1; 
} 
t = t.parentNode; 
} 
while(t.tagName.toLowerCase()!="body") // body强制退出 
} 
return arr; 
} 
} 
} 
window.onload = function() 
{ // 默认的onclick中，第一个例子 
var bba = new opCard(); 
bba.bind = ["a2","li","b2","div","c2","div"]; 
bba.style = ["style1","style2","style3"]; 
bba.overStyle = true; 
bba.creat(); 
bba = null; //菜单导航例子 
var gg = new opCard(); 
gg.bind = ["a8","li","b8","div"]; 
gg.style = ["style1","style2","style3"]; 
gg.overStyle = true; 
gg.menu = true; 
gg.creat(); 
gg = null; 
} 
</script> 
<style type="text/css"> 
body{font-size:12px; font-family:Verdana,"宋体";} 
p,ul{margin:0px; padding:0px;} 
td,div{font-size:12px} 
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;} 
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;} 
.test{text-decoration:underline;} 
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;} 
#b1 div.s strong{color:#0066FF;} 
/* */ 
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} 
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} 
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} 
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;} 
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;} 
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;} 
#b8 div a{margin-right:20px;} 
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;} 
</style> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td id="b1" valign="top"> <div class="s"> 
<!--默认的onclick中，第一个例子--> 
  <div id="a2" style="width: 297px"> 
<ul> 
  <li>规划报告</li> 
  <li>规划工程库</li> 
  <li>工程专题</li></ul> 
  </div> 
  <div id="b2"> 
<div style="width: 1080px; height: 412px;"> 
456 
</div> 
<div style="width: 1080px; height: 412px;"> 
var bba = new opCard();<br> 
bba.bind = ["a2","li","b2","div"];<br> 
bba.style = ["style1","style2","style1"];<br> 
bba.overStyle = true;<br> 
bba.creat();<br> 
bba = null; 
</div> 
<div style="width: 1080px; height: 412px;">33333</div> 
  </div> </div> 
</td> 
  </tr> 
</table> 
</body> 
</html>