<!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=gb2312" />
<title>实用的结构和行为相分离的标签切换 选项卡</title>
<style type="text/css">
.tab span{height:20px; line-height:20px; background-color:#CCF; border:#999 1px solid; cursor:pointer;}
.tab span.on{background-color:#3f0c57; color:#FFF;}
blockquote{ background-color:#fbfff3; margin:0; padding:0; border:#CCC 1px solid; width:200px; padding:10px; display:none;}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function start(){
function tab(nav,navele,con,conele){
var navlist=$(nav).getElementsByTagName(navele);
var boxlist=$(con).getElementsByTagName(conele);
for(i=0;i<navlist.length;i++)
{ navlist[0].className="on";
boxlist[0].style.display="block";
(function(n)
{navlist[i].onclick=function()
{
boxhidden();
this.className="on";
boxlist[n].style.display="block";
}
}
)(i)
}
function boxhidden(){
for(y=0,x=0;y<navlist.length,x<boxlist.length;y++,x++){
navlist[y].className="";
boxlist[x].style.display="none";
}
}
}
tab("nav","span","box","blockquote");
tab("nav1","span","box1","blockquote");
tab("nav2","span","box2","blockquote");
}
setTimeout("start()",0);
</script>
</head>
<body>
<div class="tab" id="nav">
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签4</span>
</div>
<div id="box">
<blockquote>内容一</blockquote>
<blockquote>内容二</blockquote>
<blockquote>内容三</blockquote>
<blockquote>内容四</blockquote>
</div><br />
<div class="tab" id="nav1">
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签4</span>
</div>
<div id="box1">
<blockquote>内容一</blockquote>
<blockquote>内容二</blockquote>
<blockquote>内容三</blockquote>
<blockquote>内容四</blockquote>
</div><br />
<div class="tab" id="nav2">
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签4</span>
</div>
<div id="box2">
<blockquote>内容一</blockquote>
<blockquote>内容二</blockquote>
<blockquote>内容三</blockquote>
<blockquote>内容四</blockquote>
</div>
</body>
</html>