选项卡效果（鼠标触发式）
<!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>选项卡01-未寺客-www.visc.cn</title>
<style>
body {
margin:0 auto;
padding:0;
border:0px;
width:800px;
height:auto;
background:#fff;
color:#000;
font-size:12px;
text-align: center;
font-family: Arial,'宋体','新宋体',verdana,sans-serif;}
a:link { color: #666; text-decoration: none; }
a:visited { color: #666; text-decoration: none;}
a:hover { color: #666; text-decoration: underline;}
a:active { color: #666; text-decoration: none;}
a.a_red01:link{ color:#000; text-decoration:none;}
a.a_red01:visited{ color:#000; text-decoration:none;}
a.a_red01:hover{ color:#F84374; text-decoration:underline;}
.mTab01_Title{ margin-top:100px; width:300px; height:26px!important; height:auto; border-bottom:1px #d6d6d5 solid;}
.mTab01_Title ul{ list-style:none; margin:0; padding:0}
.mTab01_Title li{ float:left; margin-left:6px; padding:5px 5px 4px 5px; border-top:1px #d6d6d5 solid; border-left:1px #d6d6d5 solid; border-right:1px #d6d6d5 solid;}
.mTab01_Content{ width:200px; margin-top:8px; padding-left:30px!important; text-align:left;}
.mTab01_Content ul{ list-style:none; margin:0; padding:0}
.mTab01_Content li{ line-height:20px;}
.none { display:none}
</style>
<script type="text/javascript">
function mTabs(tabObj,obj){
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (tabList[i].id == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
document.getElementById(tabObj+"_Title"+i).className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="mTab01" id="mTab01" >
<!--TabTitle-->
<div class="mTab01_Title">
<ul>
<li class="active" id="mTab01_Title0" onMouseOver="mTabs('mTab01',this);"><b><a href="javascript:void(0);" class="a_red01">登记</a></b></li>
<li class="normal" id="mTab01_Title1" onMouseOver="mTabs('mTab01',this);"><b><a href="javascript:void(0);" class="a_red01">婚检</a></b></li>
<li class="normal" id="mTab01_Title2" onMouseOver="mTabs('mTab01',this);"><b><a href="javascript:void(0);" class="a_red01">法规</a></b></li>
<li class="normal" id="mTab01_Title3" onMouseOver="mTabs('mTab01',this);"><b><a href="javascript:void(0);" class="a_red01">心理驿站</a></b></li>
<li class="normal" id="mTab01_Title4" onMouseOver="mTabs('mTab01',this);"><b><a href="javascript:void(0);" class="a_red01">结婚吉祥日</a></b></li>
</ul>
</div>
<!--TabContent-->
<div class="mTab01_Content">
<div id="mTab01_Content0">
<ul>
<li>· <a href="http://www.visc.cn/blog/">未寺客博客</a></li>
<li>· <a href="http://www.visc.cn/blog/">未寺客博客</a></li>
<li>· <a href="http://www.visc.cn/blog/">未寺客博客</a></li>
</ul>
</div>
<div id="mTab01_Content1" class="none">
<ul>
<li>· <a href="http://www.visc.cn">个人博客大全</a></li>
<li>· <a href="http://www.visc.cn">个人博客大全</a></li>
<li>· <a href="http://www.visc.cn">个人博客大全</a></li>
</ul>
</div>
<div id="mTab01_Content2" class="none">
<ul>
<li>· <a href="http://www.77jieri.cn">77节日网</a></li>
<li>· <a href="http://www.77jieri.cn">77节日网</a></li>
<li>· <a href="http://www.77jieri.cn">77节日网</a></li>
</ul>
</div>
<div id="mTab01_Content3" class="none">
<ul>
<li>· <a href="http://www.sellham.com">Dig Union</a></li>
<li>· <a href="http://www.sellham.com">Dig Union</a></li>
<li>· <a href="http://www.sellham.com">Dig Union</a></li>
</ul>
</div>
<div id="mTab01_Content4" class="none">
<ul>
<li>· <a href="http://www.visc.cn/blog/">未寺客</a></li>
<li>· <a href="http://www.visc.cn/blog/">未寺客</a></li>
<li>· <a href="http://www.visc.cn/blog/">未寺客</a></li>
</ul>
</div>
</div>
</div>