一个tab标签效果类
ie5.0+ firefox chrome,简单的一个类，保存运行就可以！使用请见代码注释~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab Demo - by funnyzak</title>
<style type="text/css">
ul,li{ margin:0; padding:0;}
body{ text-align:center; padding:0; margin:0;}
#tabcontainer{ width:700px; height:auto; margin:30px auto 0; border:solid 1px #CCC;}
#title_c{ width:100%; border-bottom:#CCC 1px solid; overflow:hidden;}
#title_c ul{ list-style:none;}
#title_c li,#title_c .li_on{ height:25px; line-height:25px; float:left; width:70px; padding:0 15px; text-align: center; font-size:13px; cursor:pointer; font-weight:bold; }
#title_c .li_on{ color:#F00;}
#tabcontent{ width:680px; padding:10px; margin:0; overflow:hidden; text-align:left;}
</style>
</head>
<body>
<div id="tabcontainer" >
<h3>Write By FunnyZAk</h3>
<div id="title_c">
<ul>
<li>我是TAB1</li>
<li>我是TAB2</li>
<li>我是TAB3</li>
<li>我是TAB4</li>
<li>我是TAB5</li>
<li>我是TAB6</li>
<li>我是TAB7</li>
</ul>
</div>
<div id="tabcontent">
<div>内容1sdf，这是一项全新的合作模式。对于我们
</div>
<div>内容2呆太普秸梗店打造全新的收藏地方士大夫计划，这是一项全新的合作模式。对于我们
</div>
<div>内容是打发士大夫，这是一项全新的合作模式。对于我们
</div>
<div>内容4玩儿对于我们
</div>
<div>内容5呆太普秸梗店打造全新的收藏计划，这是一项沃尔沃。对于我们
</div>
<div>内容6呆太普秸玩儿收藏计划，这是一项全新的合作模式。对于我们
</div>
<div>内容7玩儿玩儿微软委曲求全，这是一项全新的合作模式。对于我们
</div>
</div>
</div>
</body>
<script type="text/javascript">
/* Tab工具 by Funny ZAk <silenceacegmail.com> 2008-12-21
* 调用举例如： new zaktabtool("title_c","tabcontent","li_on",3);
* 第1参数为按钮button容器 第二个为内容容器 第三个为内容改变时button的class名
* 第四个为默认显示的内容序号，此参数不可大于button的数量，从1开始*/
function zaktabtool()
{
var obj = this;
this.tabbuttons = document.getElementById(arguments[0]);
this.tabcontents = document.getElementById(arguments[1]);
this.tabonclass = arguments[2];
var toc = this.tabonclass;
this.starttab = arguments[3];
var tabcontentlist = this.tabcontents.getElementsByTagName("div");
var tabbuttonlist = this.tabbuttons.getElementsByTagName("li");
this.rc = function(){
for(var i=0;i<tabcontentlist.length;i++){tabcontentlist[i].style.display = "none";}
for(var i=0;i<tabbuttonlist.length;i++){tabbuttonlist[i].className = "";}
}
this.register = function(){
for(var i=0;i<tabbuttonlist.length;i++)
{
tabbuttonlist[i].index = i;
tabbuttonlist[i].onmouseover = function(){
obj.rc();
this.className = toc;
tabcontentlist[this.index].style.display = "block";
}
}
}
this.init = function(){
if(tabcontentlist.length != tabbuttonlist.length){ alert("初始化失败！请检查元素设置！"); return false;}
obj.rc();
if(this.starttab == 0){this.starttab =1;}
tabbuttonlist[this.starttab-1].className = this.tabonclass;
tabcontentlist[this.starttab-1].style.display = "block";
obj.register();
}
obj.init();
}
new zaktabtool("title_c","tabcontent","li_on",3);
</script>
</html>
