菜鸟JS求助

骑驴快跑 2010-01-18 10:16:38

这段代码只实现了选项卡切换的功能，现在想在第二个按钮上也就是规划工程库上做个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">

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

...全文