复制代码 代码如下:
nbsp;html public -//w3c//dtd html 4.01 transitional//en>
脚本之家 选项卡效果 www.jb51.net
简单介绍
默认的onclick
onmousover触发
自动播放auto
菜单导航
关于嵌套
其他应用
一些说明
封装了一个选项卡，不过已经不像选项卡了-_-!!!
现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些
obj.bind = [a1,td,b1,div];
绑定id=a1下的td标签为菜单，绑定id=b1下的div标签为内容，简单么？
td标签的数量和div标签的数量必须相同
（若不需要显示内容，只显示菜单话，可以这个在td标签上加
）
如果id=a1下的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;
(over，out改变样式,但不激活)
var bba = new opcard();
bba.bind = [a2,li,b2,div];
bba.style = [style1,style2,style1];
bba.overstyle = true;
bba.creat();
bba = null;
33333
4444444
1
2
3
4
这个例子是比上面增加skip=true
即4
所以选项卡4是没有内容的
你可以为选项卡的文字直接加上链接，我这里就不加了
222222
33333
4444444
1
2
3
4
这个例子是用onmouseover触发的
(over，out直接激活)
并且3[选项卡3不会被激活]
overstyle = true;
var cc = new opcard();
cc.bind = [a4,li,b4,div];
cc.style = [style1,style2,style1];
cc.overstyle = true;
cc.overchange = true;
cc.creat();
cc = null;
33333
4444444
1
2
3
4
1111111
我每3秒切换一个选项卡
var ee = new opcard();
ee.bind = [a6,li,b6,div];
ee.style = [style1,style2,style1];
ee.auto = [true, 2000];
ee.overchange = true;
ee.creat();
ee = null;
33333
我每3秒切换一个选项卡
4444444
我每3秒切换一个选项卡
注：鼠标在选项卡任意位置都会使停止播放
下面这个结合overchange一起
1
2
3
4
1111111
我每2秒切换一个选项卡
var dd = new opcard();
dd.bind = [a5,li,b5,div];
dd.style = [style1,style2,style1];
dd.auto = [true, 3000];
dd.creat();
dd = null;
33333
我每2秒切换一个选项卡
4444444
我每2秒切换一个选项卡
下面这个再来个3，且overstyle=true;
1
2
3
4
1111111
我每1秒切换一个选项卡
var ff = new opcard();
ff.bind = [a7,li,b7,div];
ff.style = [style1,style2,style1];
ff.auto = [true, 1000];
ff.overchange = true;
ff.overstyle = true;
ff.creat();
ff = null;
33333
我每1秒切换一个选项卡
4444444
我每1秒切换一个选项卡
首页
新闻
论坛
联系我们
国内新闻国际新闻娱乐新闻体育新闻
蓝色理想blue idea
注：菜单延时一秒关闭
这里只是演示，实际可以设置下position什么的。-o-
多级菜单不知道能不能支持，没试过
我见过的许多选项卡都不能用来嵌套
但还是有些时候会用到的
所以如您所见，这个演示本身就是一个嵌套，效果还不错
比如图片切换什么，不过我太懒了，不写了。。。
这个能干什么，我也不知道。。
新年好啊
快过年了
天好冷啊
大家去抢红包吧
红包~！红包~！你在哪里啊？
选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错
即使选项卡菜单skip=true，内容也要放一个空的标签占位
其他好像暂时没发现什么
本来打算加入ajax的，但有些还没想好。
效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错
写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异
本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。
哦，还有选项卡是附加样式，不会取消原本设置的样式
如左边的下划线是原有的样式
啥都没有1
啥都没有2
啥都没有3
啥都没有4