选项卡解说:
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 标题1 标题2 标题3

引用示例二:

// 鼠标点击显示
slide({ handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab03").getElementsByTagName("ul"), current:"current", mode:"click" });

标题0 标题1 标题2 标题3

引用示例三:

// 自动播放
slide({
  handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),
  content:document.getElementById("tab04").getElementsByTagName("ul"),
  current:"current",
  mode:"mouseover",
  speed:1000
});

标题0 标题1 标题2 标题3