|
<!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>CSS滑动门技术实现TAB标签切换效果实例-php自学网</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> |
