yahoo.com首页的tab选项卡切换效果-导航菜单-懒人建站

yahoo.com首页的tab选项卡切换效果

原雅虎（yahoo.com）首页的tab选项卡切换效果，经测试 IE6、IE7、IE8、火狐均兼容正常。 div dl dt dd 结构。效果如图：说明：样式中的 font: 12px/30px 宋体; 是一个样式缩写：字号/行高字

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>yahoo.com首页的tab选项卡切换效果 -懒人建站 - http://www.51xuediannao.com</title>
<style type="text/css">

</style>
<script type="text/javascript">
window.onload = 
function(){
alltabs = document.getElementById('tabs').getElementsByTagName('dl')
for(i = 0; i < alltabs.length; i++){
   alltabs[i].className = "close"
   alltabs[6].className = "open";
   alltabs[i].onmouseover = function(){
    for(j = 0; j < alltabs.length; j++){
     alltabs[j].className = "close"
    }
    this.className = "open"
   }
}
}
</script>
</head>
<body>
<div id="tabs">
<h2>·呵呵 可以实现了，比你给我看的代码要好的多。</h2>
<div>
<dl id="tab1">
   <dt>懒人建站</dt>
   <dd><a href="http://www.51xuediannao.com/">懒人建站</a></dd>
</dl>
<dl id="tab2">
   <dt>JS代码</dt>
   <dd><a href="http://www.51xuediannao.com/js/">JS代码</a></dd>
</dl>
<dl id="tab3">
   <dt>建站技巧</dt>
   <dd>3</dd>
</dl>
</div>
<div>
<dl id="tab4">
   <dt>51xuediannao.com</dt>
   <dd>4</dd>
</dl>
<dl id="tab5">
   <dt>CSS技巧</dt>
   <dd>5</dd>
</dl>
<dl id="tab6">
   <dt>51xuediannao.com</dt>
   <dd><a href="http://www.51xuediannao.com/">懒人建站</a></dd>
</dl>
</div>

</div>

<pre>
    说明：样式中的 font: 12px/30px "宋体";  是一个样式缩写：字号/行高 字体；
    注意.open dt .close dt #tabs div 和其他样式中的宽高，和间距设置，
    适当的控制可以打造出你想要的效果。
    JS代码中的 alltabs[6].className = "open"; 是用来控制初始状态的，6 就是第七个为初始状态
    如果把这一句删除，就是没有初始状态。
    经测试 IE6、IE7、IE8、火狐 均正常
</pre>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLASH焦点图片，国外网页设计欣赏与模板和CSS技巧。；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</body>
</html>

代码说明:

    原雅虎（yahoo.com）首页的tab选项卡切换效果，经测试 IE6、IE7、IE8、火狐均兼容正常。
div dl dt dd 结构。
效果如图：
yahoo.com首页的tab选项卡切换效果

    说明：样式中的 font: 12px/30px "宋体"; 是一个样式缩写：字号/行高字体；
    注意.open dt .close dt #tabs div 和其他样式中的宽高，和间距设置，
    适当的控制可以打造出你想要的效果。
    JS代码中的 alltabs[6].className = "open"; 是用来控制初始状态的，6 就是第七个为初始状态
    如果把这一句删除，就是没有初始状态。
    经测试 IE6、IE7、IE8、火狐均正常

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：懒人建站|发布人：懒人建站|2010-01-13|热度：次|收藏|报错