<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单实用选项卡</title>
<style type="text/css">
body,div,ul,li{ margin:0 auto; padding:0;}
body{ font:12px "MS YaHei";}
a{ color:#000; text-decoration:none;}
ul{ list-style:none;}
#tag{ 408px;}
.menu0{ height:24px;}
.menu0 li{ float:left; 100px; height:30px; line-height:30px; text-align:center; cursor:pointer; border:1px solid #06C; background:#C9F;}
.menu0 li.hover{ background:red; color:#551BDC;}
#tagContent0 ul{ display:none;}
#tagContent0 ul.block{ display:block;}
#tagContent0{ border:1px solid #0CF; height:250px;}
</style>
<script type="text/javascript">
function setTab(m,n){
var mli=document.getElementById("menu"+m).getElementsByTagName("li");
var tul=document.getElementById("tagContent"+m).getElementsByTagName("ul");
for(i=0;i<mli.length;i++){
mli[i].className=i==n?"hover":"";
tul[i].style.display=i==n?"block":"none";
}
}
</script>
</head>
<body>
<div id="tag">
<div id="Tab0">
<ul class="menu0" id="menu0">
<li class="hover" onclick="setTab(0,0)">选项卡一</li>
<li onclick="setTab(0,1)">选项卡二</li>
<li onclick="setTab(0,2)">选项卡三</li>
<li onclick="setTab(0,3)">选项卡四</li>
</ul>
</div>
<div id="tagContent0">
<ul class="block"><li>选项卡一内容</li></ul>
<ul><li>选项卡二内容</li></ul>
<ul><li>选项卡三内容</li></ul>
<ul><li>选项卡四内容</li></ul>
</div>
</div>
</body>
</html>