神马文学网各种效果的tab选项卡菜单代码
来源：百度文库 编辑：神马文学网 时间：2024/05/23 17:51:52
选项卡解说：
1、支持一个页面多次引用；
2、一次引用实现多次切换；
3、点击/滑过等切换方式自定义；
4、自动播放+鼠标动作切换；
5、自动播放时鼠标移向内容区域暂停播放；
6、切换完成后回调函数。
函数引用说明：
slide({handle:elems, content:elems, current:"current", mode:"click", delay:5000, fn:function(){...} });
引用基本格式 slide({...}); 中间的“...”所代表的就是参数内容。
参数说明：
handle：表示选项卡分组名称的节点数组
content：表示与分组名称对应的内容的节点数组
current：表示当前分组名称的样式名称
mode：表示切换方式，支持“click/mouseover/...”等鼠标事件
delay：表示自动播放的间隔时间，有值则自动播放，单位毫秒
fn：表示切换完成一次后的回调函数
引用示例一：
// 鼠标滑过显示 一次引用，实现多个切换
var slides = ["tab01", "tab02"];
for(var i=0; i<slides.length; i++){
var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");
var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");
slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });
}
标题0
标题1
标题2
标题3
- 滑过显示0
标题0
标题1
标题2
标题3
- 滑过显示2
引用示例二：
// 鼠标点击显示
slide({ handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab03").getElementsByTagName("ul"), current:"current", mode:"click" });
引用示例三：
// 自动播放
slide({
handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),
content:document.getElementById("tab04").getElementsByTagName("ul"),
current:"current",
mode:"mouseover",
speed:1000
});
——————————————————————————————————————下面是tab.min.js文件代码：——————————————————————————————————/*
auther:mimi
QQ：523450533
date:2010.07
*/function addEvent(elem,type,fn){if(elem.nodeName==="A"&&type==="click"){elem.setAttribute("href","javascript:void(0)")};if(elem.addEventListener){elem.addEventListener(type,fn,false);return true;}else if(elem.attachEvent){elem['e'+type+fn]=fn;elem[type+fn]=function(){elem['e'+type+fn](window.event);}
elem.attachEvent("on"+type,elem[type+fn]);return true;}
return false;};function slide(o){var handle=o.handle,content=o.content,mode=o.mode||"moseover",myClass=o.current,speed=o.speed,fn=o.fn,flag=0,past,timer;for(var i=0;i
if(speed)show(flag);}————————————————————————————————————