<!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选项卡</title>
<style type="text/css">
*{margin:0; padding:0;}
.box{width:298px; height:98px; margin:10px; border:1px solid #eee; overflow:hidden;}
.title{height:27px; position:relative;}
ul{ list-style:none; width:300px; height:27px; position:absolute; left:-1px;}
.title ul li{float:left; width:58px; height:26px; background-color:#F7F7F7; line-height:26px; text-align:center; padding:0 1px; border-bottom:1px solid #EEE; overflow:hidden;}
.box ul li a:link,.box ul li a:visited{text-decoration:none; color:#000;}
.title ul li a:hover{color:#F00;}
.title ul li.selected{background:#FFF; font-weight:bold;
border-bottom-color:#FFF; padding:0; border-left:1px solid #EEE;border-right:1px solid #EEE;}
.content .mod{margin-top:15px; position:absolute; left:25px;}
.content .mod ul li{width:150px; float:left; height:25px; overflow:hidden; font-size:12px;}
</style>
<script type="text/javascript">
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var index=0;
var timer=null;
var lis=$('title').getElementsByTagName('li');
var divs=$('content').getElementsBYTagName('div');
if(lis.length!=divs.length)
{return;}
for(var i=0;i<lis.length;i++)
{
lis[i].id=i;
lis[i].onmouseover=function()
{
var that=this;
if(timer){clearTimeout(timer); timer=null;}
timer=window.setTimeout(function()
{
for(var j=0;j<lis.length;j++)
{
lis[j].className='';
divs[j].style.display='none';
}
lis[that.id].className='selected';
divs[that.id].style.display='block';
},500);
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="title" id="title">
<ul>
<li class="selected"><a href="#">求助</a></li>
<li ><a href="#">求助</a></li>
<li><a href="#">求助</a></li>
<li><a href="#">求助</a></li>
<li ><a href="#">求助</a></li>
</ul>
</div>
<div class="content" id="content">
<div class="mod" style="display:block">
<ul>
<li><a href="#">真心希望得到求助</a></li>
<li><a href="#">真心希望得到求助</a></li>
<li><a href="#">真心希望得到求助！</a></li>
<li><a href="#">真心希望得到求助</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">你别看我只是一只羊</a></li>
<li><a href="#">你别看我只是一只羊</a></li>
<li><a href="#">你别看我只是一只羊</a></li>
<li><a href="#">你别看我只是一只羊</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">你别看我只是一只羊</a></li>
<li><a href="#">绿草因为我变的更香</a></li>
<li><a href="#">天空因为我变的更蓝</a></li>
<li><a href="#">白云因为我变的柔软</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">再不表白天就要黑了</a></li>
<li><a href="#">你是害羞还是太迟钝</a></li>
<li><a href="#">脚步太快你走在前头</a></li>
<li><a href="#">爱情因你而变得更完整</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">爱情因你而变得更完整</a></li>
<li><a href="#">脚步太快你走在前头</a></li>
<li><a href="#">脚步太快你走在前头</a></li>
<li><a href="#">脚步太快你走在前头！</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
