tab菜单php代码,各种效果的tab选项卡菜单代码

网页代码：

————————————————————————————————————

tab

h2{ margin:0;}

ul{ padding:0; margin:0;}

.tab{ width:400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;}

.tab h2{ width:100%; overflow:hidden; font-size:12px; font-weight:normal; background:#f2f2f2;}

.tab h2 span,

.tab h2 a{ float:left; width:50px; line-height:25px; background:#ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; cursor:pointer;}

.tab h2 .current{ background:#fff; font-weight:bold; border-bottom:1px solid #fff;}

.tab ul{ padding:25px;}

选项卡解说：

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

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

• 点击显示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

• 自动播放0

• 自动播放1

• 自动播放2

• 自动播放3

// 鼠标滑过显示  一次引用，实现多个切换

var slides = ["tab01", "tab02"];

for(var i=0; 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" });

}

// 鼠标点击显示

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

});

// 如果您的页面引用了JQuery，那么这里的引用可以这样写

// slide({handle:$("#tab04 h2 a"), content:$("#tab04 ul"), current:"current", mode:"click"});

——————————————————————————————————————

下面是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

function show(flag){var i=flag;handle[past].className="";content[past].style.display="none";past=flag;handle[i].className=myClass;content[i].style.display="block";if(handle[i].nodeName==="A")handle[i].blur();(flag+1)==handle.length?flag=0:flag++;if(speed){timer=setTimeout(function(){show(flag)},speed);addEvent(content[i],"mouseover",function(){clearTimeout(timer)});addEvent(content[i],"mouseout",function(){clearTimeout(timer);timer=setTimeout(function(){show(flag)},speed)});};if(fn)fn();}

if(speed)show(flag);}

————————————————————————————————————