滑动门效果 - by koyoz

我是首页
我是新闻
我是博客
我是图片
我是播客

今天写了一个简单的CSS滑动门效果,也就是TAB标签切换效果了.

这个效果能兼容 IE6+, FireFox 2+, Opera8+ 等主流浏览器.

说到兼容,还特别为 Opera 额外加了句兼容的代码, 这里介绍一下:

 

CSS代码
  1. @media all and (min-width: 0px){/* 自己添加的css样式 */}   
  2. /* 例如: */  
  3. @media all and (min-width: 0px){#title{height:23px;}}  

以下是所有实现的代码: 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>滑动门效果 - by koyoz</title>  
  7. <style type="text/css">  
  8. body {font-size:12px;font-family:Verdana;}   
  9. /* 滑动门定义 */   
  10. #title{height:24px; *height:23px; width:400px; border-bottom:1px solid #ccc;}   
  11. @media all and (min-width: 0px){#title{height:23px;}}   
  12. #title ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}   
  13. #title ul li {float:left;margin-left:5px;}   
  14. #title ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}   
  15. #title ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}   
  16. /* 内容 */   
  17. #content {padding:5px 10px;}   
  18. #content div{display:none;}   
  19. </style>  
  20.   
  21. </head>  
  22.   
  23. <body>  
  24. <div id="title">  
  25.     <ul>  
  26.         <li><a href="javascript://" onmouseover="show(0)" class="over">首页</a></li>  
  27.         <li><a href="javascript://" onmouseover="show(1)">新闻</a></li>  
  28.         <li><a href="javascript://" onmouseover="show(2)">博客</a></li>  
  29.         <li><a href="javascript://" onmouseover="show(3)">图片</a></li>  
  30.         <li><a href="javascript://" onmouseover="show(4)">播客</a></li>  
  31.     </ul>  
  32.        
  33. </div>  
  34.   
  35. <div id="content">  
  36.     <div style="display:block">我是首页</div>  
  37.     <div>我是新闻</div>  
  38.     <div>我是博客</div>  
  39.     <div>我是图片</div>  
  40.     <div>我是播客</div>  
  41. </div>  
  42.   
  43. <script type="text/javascript">  
  44. function show(n)   
  45. {      
  46.     var o = document.getElementById('title').getElementsByTagName("a");   
  47.     var c = document.getElementById('content').getElementsByTagName("div");    
  48.     for(i = 0; l = o.length, i < l; o[i].className = '',c[i].style.display = 'none',i++ );   
  49.     o[n].className = 'over';   
  50.     c[n].style.display = 'block';      
  51. }   
  52. </script>  
  53. </body>  
  54.   
  55. </html>  

怎么样? 还算简洁吧.

可以把onmouseover改成onclick事件,即可以实现点击切换的效果.