<!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選項(xiàng)卡</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="#">綠草因?yàn)槲易兊母?lt;/a></li>
??????????????????<li><a?href="#">天空因?yàn)槲易兊母{(lán)</a></li>
??????????????????<li><a?href="#">白云因?yàn)槲易兊娜彳?lt;/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>
