選項卡js代碼

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>選項卡js代碼</title>
<script language="網頁特效">
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||"moseo教程ver",myclass=o.current,speed=o.speed,fn=o.fn,flag=0,past,timer;for(var i=0;i<handle.length;i++){(function(i){addevent(handle[i],mode,function(){cleartimeout(timer);show(i);});})(i);if(handle[i].classname===myclass)past=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);}
</script>
<style>
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;}
</style>
</head>

<body>
<div class="tab" id="tab01">
  <h2>
    <span class="current">標題0</span>
    <span>標題1</span>
    <span>標題2</span>
    <span>標題3</span>
  </h2>
  <ul>滑過顯示0</ul>
  <ul style="display:none">滑過顯示1</ul>
  <ul style="display:none">滑過顯示2</ul>
  <ul style="display:none">滑過顯示3</ul>
</div>
<br />
<br />
<br />
<br />

<script>

//切換tab選項卡
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" });
}
</script>
</body>
</html>