<!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" c />
<title>仿雅虎首页的特色服务切换效果</title>
<style type="text/css">
<!--
* { margin:0; padding:0 }
div, dl, dt, dd { display:inline-block; }
div, dl, dt, dd { display:block }
h2{ font: 800 12px/20px "宋体"; }
#tabs { border:1px solid #ccc; margin:40px; width:382px; padding:4px 0 }
#tabs div { padding:69px 4px 0px; position:relative; }
#tabs dt { text-align:center; font: 12px/60px "宋体"; }
#tabs dd { font: 12px/20px "宋体"; padding:10px; }
#tab1 dt { left: 4px; top: 4px }
#tab2 dt { left:130px; top:4px }
#tab3 dt { left:256px; top:4px }
#tab4 dt { left: 4px; top: 4px }
#tab5 dt { left:130px; top:4px }
#tab6 dt { left:256px; top:4px }
.close dt { height:60px; width:120px; background:#FAFAFA; position:absolute; border:1px solid #ccc }
.close dd { display:none }
.open dt { height:65px; width:120px; background:#EBEBEB; position:absolute; border:1px solid #ccc; border-bottom:none; }
.open dd { background:#EBEBEB; border:1px solid #ccc; }
-->
</style>
<script type="text/javascript">
var timer=0;k=0//预打开窗口*对应<dl>的ID*k<=0无效
var waittime
window.onload =
function(){
alltabs = document.getElementById('tabs').getElementsByTagName('dl')
for(i = 0; i < alltabs.length; i++){
alltabs
.className = "close"
alltabs.onmouseover = function (){
clearTimeout(waittime)
closeall()
this.className = "open"
}
alltabs.onmouseout = function (){
waittime=setTimeout(closeall,1000)
}
}
if(timer==0&&k>0){timer=1;alltabs[k-1].className = "open"}
function closeall(){
for(j = 0; j < alltabs.length; j++){
alltabs[j].className = "close"
}
}
}
</script>
</head>
<body>
<div id="tabs">
<h2>·仿雅虎首页的特色服务切换效果 - Zehee</h2>
<div>
<dl id="tab1">
<dt>天气预报</dt>
<dd>1</dd>
</dl>
<dl id="tab2">
<dt>股市行情</dt>
<dd>2</dd>
</dl>
<dl id="tab3">
<dt>娱乐新闻</dt>
<dd>3</dd>
</dl>
</div>
<div>
<dl id="tab4">
<dt>星座运势</dt>
<dd>4</dd>
</dl>
<dl id="tab5">
<dt>免费邮箱</dt>
<dd>5</dd>
</dl>
<dl id="tab6">
<dt>个人中心</dt>
<dd>6</dd>
</dl>
</div>
</div>
</body>
</html>
