html5实现tab切换效果代码,js实现tab切换效果实例

直接先来个真相吧：

【HTML代码】

• tab1
• tab2
• tab3

这是TAB切换效果区域1

这是TAB切换效果区域2

这是TAB切换效果区域3

【js】

/**

* tabs

* @author 橡树小屋

*/

var tabs=function(){

function tag(name,elem){

return (elem||document).getElementsByTagName(name);

}

//获得相应ID的元素

function id(name){

return document.getElementById(name);

}

function first(elem){

elem=elem.firstChild;

return elem&&elem.nodeType==1? elem:next(elem);

}

function next(elem){

do{

elem=elem.nextSibling;

}while(

elem&&elem.nodeType!=1

)

return elem;

}

return {

set:function(elemId,tabId){

var elem=tag("li",id(elemId));

var tabs=tag("div",id(tabId));

var listNum=elem.length;

var tabNum=tabs.length;

for(var i=0;i

elem[i].οnclick=(function(i){

return function(){

for(var j=0;j

if(i==j){

tabs[j].style.display="block";

//alert(elem[j].firstChild);

elem[j].firstChild.className="selected";

}

else{

tabs[j].style.display="none";

elem[j].firstChild.className="";

}

}

}

})(i)

}

}

}

}();

window.οnlοad=function(){

tabs.set("nav","menu_con");

}

【CSS】

body{ background:#FFF;}

a{color:#585858}

#menu{width:360px;}

/*-------------------nav样式----------------------*/

#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;

background:url(../images/bg.gif)}

#menu #nav li {float:left;width:120px;}

#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}

/*-------------------列表标题样式----------------------*/

#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}

.selected{background:url(../images/tag_bg.gif);}

.clear{ clear:both}

调用方法：

tabs.set("nav","menu_con");

代码下载 点击这里

这个实例只是简单实现了点击切换的效果，还有许多功能可以添加，大家一起动手实践一下吧。