复制代码
代码如下:-//W3C//DTDHTML4.01Transitional//EN”>

菜鸟JS不会,希望帮忙。。
[b]这段代码只实现了选项卡切换的功能,现在想在第二个按钮上也是就规划工程库上做个2级菜单,然后点击2级菜单在进行窗体的切换。。希望大哥们帮忙指点~[/b]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

脚本之家选项卡效果www.jb51.net

井底的蛙/* 选项卡封装 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
{ 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 //
需要跳过的容器 { if(this.overStyle || this.overChange) // 有over, out
改变样式 或者 激活 { arrMenu[i].onmouseover =
function(){changeTitle;autoStop;} arrMenu[i].onmouseout =
function(){changeTitle;autoStop;} } 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;my.menu?changeMenu:autoStop;}
arrMenu[i].onmouseout =
function(){changeOption;my.menu?changeMenu:autoStop;} } else
//onclick触发 { arrMenu[i].onclick =
function(){changeOption;autoStop;if(argLen==1){func()}}
if(this.overStyle) // 有over, out 改变样式 { arrMenu[i].onmouseover =
function(){changeTitle;autoStop;} arrMenu[i].onmouseout =
function(){changeTitle;autoStop;} } else // 没有over, out 改变样式 {
if(this.auto[0]) // 有自动运行 { arrMenu[i].onmouseover =
function(){autoStop;} arrMenu[i].onmouseout = function(){autoStop;} }
} } if(this.auto[0] || this.menu) //arrinfo 控制自动播放 {
arrInfo[i].onmouseover = function(){my.menu?changeMenu:autoStop;}
arrInfo[i].onmouseout = function(){my.menu?changeMenu:autoStop;} } }
//for结束 if(this.auto[0]) { this.timerID =
setTimeout(autoMove,this.auto[1]) } // 自动播放 function autoMove() {
var n; n = my.index + 1; if{n=0}; while(arrMenu[n].getAttribute //
需要跳过的容器 { n += 1; if{n=0}; } changeOption(arrMenu[n]);
my.timerID = setTimeout(autoMove,my.auto[1]); } //
onmouseover时,自动播放停止。num:0为over,1为out。 obj暂时无用。 -_-!!
function autoStop { if(!my.auto[0]){return;} //if(obj.index==my.index)
num == 0 ? clearTimeout(my.timerID) : my.timerID =
setTimeout(autoMove,my.auto[1]); } // 改变选项卡 function changeOption
{ 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 {
if(!my.overStyle){return;}; if(obj.index!=my.index){obj.className =
getClass(obj,my.style[num])} } /* 菜单类型时用 obj:目标对象。
num:1为over,0为out */ function changeMenu { if{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 {
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){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 && d == depth) {
arr.push(arrObj[i]);break; //得到数据 } else { if{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;
}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;}

/* 选项卡封装 by井底的蛙 2008-2-4 */ opCard=function() {
this.bind=newArray(); this.index=0;//默认显示哪个选项卡,从0开始
this.style=newArray();//[“”,””,””]
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 {
var_arrMenu=document.getElementById.getElementsByTagName;
var_arrInfo=document.getElementById.getElementsByTagName; varmy=this,i;
varargLen=arguments.length; vararrM=newArray();
if(this.nesting[0]||this.nesting[1])//有选项卡嵌套
{//过滤出需要的数据
vararrMenu=this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
vararrInfo=this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
} else { vararrMenu=_arrMenu; vararrInfo=_arrInfo; }
varl=arrMenu.length;
if{alert(“菜单和内容必须拥有相同的数量\n如果需要,你可以放一个空的在那占位。”)}
//修正
if{this.auto=false;this.overChange=true;}//如果是菜单,则没有自动运行,有over,out直接激活
//循环添加各个事件等 for { 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//需要跳过的容器 {
if(this.overStyle||this.overChange)//有over,out改变样式或者激活 {
arrMenu[i].onmouseover=function;autoStop;}
arrMenu[i].onmouseout=function;autoStop;} }
arrMenu[i].onclick=function{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//有鼠标over,out事件 {
arrMenu[i].onmouseover=function;my.menu?changeMenu;}
arrMenu[i].onmouseout=function;my.menu?changeMenu;} }
else//onclick触发 { arrMenu[i].onclick=function;autoStop{func()}}
if//有over,out改变样式 { arrMenu[i].onmouseover=function;autoStop;}
arrMenu[i].onmouseout=function;autoStop;} } else//没有over,out改变样式
{ if//有自动运行 { arrMenu[i].onmouseover=function;}
arrMenu[i].onmouseout=function;} } } }
if(this.auto[0]||this.menu)//arrinfo控制自动播放 {
arrInfo[i].onmouseover=function(){my.menu?changeMenu;}
arrInfo[i].onmouseout=function(){my.menu?changeMenu;} } }//for结束 if
{ this.timerID=setTimeout(autoMove,this.auto[1]) } //自动播放
functionautoMove() { varn; n=my.index+1; if{n=0};
while(arrMenu[n].getAttribute//需要跳过的容器 { n+=1; if{n=0}; }
changeOption; my.timerID=setTimeout; }
//onmouseover时,自动播放停止。num:0为over,1为out。obj暂时无用。-_-!!
functionautoStop { if{return;} //if
num==0?clearTimeout:my.timerID=setTimeout; } //改变选项卡
functionchangeOption {
arrMenu[my.index].className=getClass(arrMenu[my.index],my.style[0]);//修改旧内容
arrInfo[my.index].style.display=”none”;//隐藏旧内容
obj.className=getClass;//修改为新样式
arrInfo[obj.index].style.display=””;//显示新内容
my.index=obj.index;//更新当前选择的index } /*
只有onclick时,overStyle的onmouseover,onmouseout事件。用来预激活
obj:目标对象。num:1为over,0为out */ functionchangeTitle {
if{return;}; if{obj.className=getClass} } /* 菜单类型时用
obj:目标对象。num:1为over,0为out */ functionchangeMenu{return;}
num==0?my.menutimerID=setTimeout:clearTimeout } //关闭菜单
functionmenuClose() { arrInfo[my.index].style.display=”none”;
arrMenu[my.index].className=my.style[0]; } //得到className
functiongetClass { if{returns} else{returno.cName+””+s} }
//嵌套情况下得到真正的子集 functiongetChilds { vardepth=0;
varfirstObj=my.nesting[num]==””?arrObj[0]:document.getElementById;//得到第一个子集
do//计算深度 { if(firstObj.parentNode.getAttribute{break}else{depth+=1}
firstObj=firstObj.parentNode; }
while(firstObj.tagName.toLowerCase//body强制退出。 vart;
vararr=newArray(); for(i=0;i
body{font-size:12px;font-family:Verdana,”宋体”;}
p,ul{margin:0px;padding:0px;} td,div{font-size:12px}
.a1_0{border:1pxdotted#3399FF;width:120px;background-color:#f5f5f5;margin:3px;padding:2px0px;cursor:pointer;}
.a1_1{border:1pxsolid#FF9900;width:120px;margin:3px;padding:2px0px;cursor:pointer;}
.test{text-decoration:underline;}
#b1div.s{border:1pxsolid#999999;width:90%;height:500px;margin:3px;padding:10px;overflow-y:auto;line-height:18px;}
#b1div.sstrong{color:#0066FF;} /**/
.style1{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#3399FF;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}
.style2{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#FF9900;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}
.style3{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#666666;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8{height:22px;}
#b2div,#b3div,#b4div,#b5div,#b6div,#b7div{border:1pxsolid#FF9900;height:100px;width:400px;padding:5px;overflow-y:auto;}
#b8div{border:1pxsolid#FF9900;height:20px;width:350px;padding:2px5px;}
#b8diva{margin-right:20px;}
.style4{float:left;background-color:#999999;text-align:left;list-style-type:none;padding:2px5px;color:#FFFFFF;}

  • 规划报告
  • 规划工程库
  • 工程专题

456 var bba = new opCard();
bba.bind = ["a2","li","b2","div"];
bba.style = ["style1","style2","style1"];
bba.overStyle = true;
bba.creat();
bba = null; 33333

简单介绍

默认的onclick

onmousover触发

自动播放auto

菜单导航

关于嵌套

其他应用

一些说明

封装了一个选项卡,不过已经不像选项卡了-_-!!!

现稍微说明下吧,如果不明白的话,旁边有几个例子可能说明起来更清楚些

obj.bind=[“a1″,”td”,”b1″,”div”];
绑定下的td标签为菜单,绑定下的div标签为内容,简单么?
td标签的数量和div标签的数量必须相同
(若不需要显示内容,只显示菜单话,可以这个在td标签上加)
如果下的td标签有嵌套表格,这样的话,就不是所有的td都是菜单,这时候需要用下nesting

obj.nesting=[false,true,””,””];
当标签tag有嵌套时,需要用到这个
比如选项卡内容是放在div容器里,而本身这个内容里也有div标签,这时就需要用到
菜单嵌套为false,内容嵌套为true,且会自动判断出内容标签,多数时候这样就可以了
判断方法为,认定getElementsByTagName后第一个标签为内容第一项,其他的就用这个第一项的深度来判断
但有些情况下,这样还是不行
我用后面2个参数做id来指定菜单或者内容的第一项nesting=[false,true,””,”q2″];
这样就肯定不会错了

obj.index=0;
默认显示第几个选项卡,序号从0开始

obj.style=[“c1″,”c2″,”c3”]
菜单加载的样式的className:
菜单未选中的className是c1
菜单选中的className是c2
菜单onmouseover的className是c3

obj.overStyle=false;
选项卡是否有onmouseover,onmouseout变换样式事件[非激活选项卡内容],对应的样式为style[2]

obj.overChange=false;
选项卡内容是否用onmouseover,onmouseout直接激活

obj.menu=false;
选项卡是菜单类型

obj.auto=[false,1000];
选项卡是否自动播放,播放速度

obj.creat();
开始生成选项卡,需要onclick触发事件的话,可以obj.creat
所有的都会触发

  • 1
  • 2
  • 3
  • 4

这个例子是用onclick触发的
并设置overStyle=true;

varbba=newopCard();
bba.bind=[“a2″,”li”,”b2″,”div”];
bba.style=[“style1″,”style2″,”style1”];
bba.overStyle=true;
bba.creat();
bba=null;

33333

4444444

  • 1
  • 2
  • 3

这个例子是比上面增加skip=”true”
即4
所以选项卡4是没有内容的
你可以为选项卡的文字直接加上链接,我这里就不加了

222222

33333

4444444

  • 1
  • 2
  • 4

这个例子是用onmouseover触发的

并且3[选项卡3不会被激活]
overStyle=true;

varcc=newopCard();
cc.bind=[“a4″,”li”,”b4″,”div”];
cc.style=[“style1″,”style2″,”style1”];
cc.overStyle=true;
cc.overChange=true;
cc.creat();
cc=null;

33333

4444444

相关文章