<!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>无标题文档</title>
<style type="text/css">
html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}
body{text-align:center;font:12px Verdana,sans-serif;margin:5px 0}
ul,ol,li{margin:0;padding:0;border:0;list-style-type:none} input,select{font-size:12px}
a{color:#010101;text-decoration:none;outline:none} a:hover{text-decoration:underline}
.Tab{height:100%;text-align:left}
.Tab .title,.Tab .title div,.Tab .title .n1,.Tab .title .n1 span,.Tab .title .n2,.Tab .title .n2 span{background:url("http://pic.eneting.com/upload/2008-07/3/0f31f293b25ac2d4018f8a794362c442.gif") no-repeat left top}
.Tab .title{height:30px;padding-left:10px}
.Tab .title div{background-position:right top;display:block;height:100%}
.Tab .title .n1,.Tab .title .n2{background-position:left bottom;height:26px;line-height:26px; display:block;float:left;text-align:center;padding-left:12px;margin-top:4px;margin-left:1px;color:#333; text-decoration:none}
.Tab .title .n1 span,.Tab .title .n2 span{background-position:right bottom;display:block;padding-right:12px}
.Tab .title .n2{background-position:left -30px}
.Tab .title .n2 span{background-position:right -30px}
.tabcon ul{margin:5px auto;padding:0}
.tabcon ul li{height:24px;line-height:24px;padding-left:16px;overflow:hidden;display:block}
</style>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
function Tab(Xname,Cname,Lenght,j){for(i=1;i<Lenght;i++){eval("$(‘"+Xname+i+"’).className=’n2’");}eval("$(‘"+Xname+j+"’).className=’n1’");for(i=1;i<Lenght;i++){eval("$(‘"+Cname+i+"’).style.display=’none’");eval("$(‘"+Cname+j+"’).style.display=’block’");}}
</script>
</head>
<body>
<div style="width:500px;margin:0 auto">
<p>onmouseover事件</p>
<div class="Tab">
<div class="title">
<a href="#" id="a1" class="n1" onmouseover="Tab(‘a’,’ax’,6,1)"><span>选项卡1</span></a>
<a href="#" id="a2" class="n2" onmouseover="Tab(‘a’,’ax’,6,2)"><span>选项卡选项卡2</span></a>
<a href="#" id="a3" class="n2" onmouseover="Tab(‘a’,’ax’,6,3)"><span>选3</span></a>
<a href="#" id="a4" class="n2" onmouseover="Tab(‘a’,’ax’,6,4)"><span>选选4</span></a>
<a href="#" id="a5" class="n2" onmouseover="Tab(‘a’,’ax’,6,5)"><span>选选选选选选选选选选选选选选5</span></a>
<div></div>
</div>
<div class="tabcon">
<ul id="ax1">
<li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
</ul>
<ul id="ax2" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="ax3" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
<ul id="ax4" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="ax5" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
</div>
</div>
<p>onclick事件</p>
<div class="Tab">
<div class="title">
<a href="#" id="b1" class="n1" onclick="Tab(‘b’,’bx’,6,1)"><span>选项卡1</span></a>
<a href="#" id="b2" class="n2" onclick="Tab(‘b’,’bx’,6,2)"><span>选项卡选项卡2</span></a>
<a href="#" id="b3" class="n2" onclick="Tab(‘b’,’bx’,6,3)"><span>选3</span></a>
<a href="#" id="b4" class="n2" onclick="Tab(‘b’,’bx’,6,4)"><span>选选4</span></a>
<a href="#" id="b5" class="n2" onclick="Tab(‘b’,’bx’,6,5)"><span>选选选选选选选选选选选选选选5</span></a>
<div></div>
</div>
<div class="tabcon">
<ul id="bx1">
<li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
</ul>
<ul id="bx2" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="bx3" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
<ul id="bx4" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="bx5" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

<!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>滑动门效果 – by koyoz</title>  
<style type="text/css">  
body {font-size:12px;font-family:Verdana;}   
/* 滑动门定义 */   
#title{height:24px; *height:23px; width:400px; border-bottom:1px solid #ccc;}   
@media all and (min-width: 0px){#title{height:23px;}}   
#title ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}   
#title ul li {float:left;margin-left:5px;}   
#title ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}   
#title ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}   
/* 内容 */   
#content {padding:5px 10px;}   
#content div{display:none;}   
</style>  
  
</head>  
  
<body>  
<div id="title">  
    <ul>  
        <li><a href="javascript://" onmouseover="show(0)" class="over">首页</a></li>  
        <li><a href="javascript://" onmouseover="show(1)">新闻</a></li>  
        <li><a href="javascript://" onmouseover="show(2)">博客</a></li>  
        <li><a href="javascript://" onmouseover="show(3)">图片</a></li>  
        <li><a href="javascript://" onmouseover="show(4)">播客</a></li>  
    </ul>  
       
</div>  
  
<div id="content">  
    <div style="display:block">我是首页</div>  
    <div>我是新闻</div>  
    <div>我是博客</div>  
    <div>我是图片</div>  
    <div>我是播客</div>  
</div>  
  
<script type="text/javascript">  
function show(n)   
{      
     var o = document.getElementById(‘title’).getElementsByTagName("a");   
     var c = document.getElementById(‘content’).getElementsByTagName("div");   
     for(i = 0; l = o.length, i < l; o[i].className = ”,c[i].style.display = ‘none’,i++ );   
     o[n].className = ‘over';   
     c[n].style.display = ‘block';      
}   
</script>  
</body>  
  
</html>  

<!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>滑动门效果 – by koyoz</title>  
<style type="text/css">  
body {font-size:12px;font-family:Verdana;}   
/* 滑动门定义 */   
#title{height:24px; *height:23px; width:400px; border-bottom:1px solid #ccc;}   
@media all and (min-width: 0px){#title{height:23px;}}   
#title ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}   
#title ul li {float:left;margin-left:5px;}   
#title ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}   
#title ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}   
/* 内容 */   
#content {padding:5px 10px;}   
#content div{display:none;}   
</style>  
  
</head>  
  
<body>  
<div id="title">  
    <ul>  
        <li><a href="javascript://" onmouseover="show(0)" class="over">首页</a></li>  
        <li><a href="javascript://" onmouseover="show(1)">新闻</a></li>  
        <li><a href="javascript://" onmouseover="show(2)">博客</a></li>  
        <li><a href="javascript://" onmouseover="show(3)">图片</a></li>  
        <li><a href="javascript://" onmouseover="show(4)">播客</a></li>  
    </ul>  
       
</div>  
  
<div id="content">  
    <div style="display:block">我是首页</div>  
    <div>我是新闻</div>  
    <div>我是博客</div>  
    <div>我是图片</div>  
    <div>我是播客</div>  
</div>  
  
<script type="text/javascript">  
function show(n)   
{      
     var o = document.getElementById(‘title’).getElementsByTagName("a");   
     var c = document.getElementById(‘content’).getElementsByTagName("div");   
     for(i = 0; l = o.length, i < l; o[i].className = ”,c[i].style.display = ‘none’,i++ );   
     o[n].className = ‘over';   
     c[n].style.display = ‘block';      
}   
</script>  
</body>  
  
</html>