用户登录
您的IP：18.216.121.55您的操作系统：Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
<!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>滑动门效果</title>
<style type="text/css">
/* 滑动门定义 */
#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;}
#title1{height:24px; *height:23px; width:400px; border-bottom:1px solid #ccc;}
@media all and (min-width: 0px){#title{height:23px;}}
#title1 ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}
#title1 ul li {margin-left:5px;}
#title1 ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}
#title1 ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}
/* 内容 */
#content1 {padding:5px 10px;}
#content1 div{display:none;}
</style>
</head>
<body>
<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>
<script type="text/javascript">
function show1(n)
{
var o = document.getElementById('title1').getElementsByTagName("a");
var c = document.getElementById('content1').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>
<table>
<tbody>
<tr>
<th>
<div id="title1">
<ul>
<li><a href="javascript://" onmouseover="show1(0)" class="over">首页</a></li>
<li><a href="javascript://" onmouseover="show1(1)">车辆查询</a></li>
<li><a href="javascript://" onmouseover="show1(2)">违规查询</a></li>
</ul>
</div>
</th>
<td>
<div id="content1">
<table>
<tbody>
<tr>
<td class="tdText">
<div style="display:block">请输入身份证号：</div>
<div>
违章车牌号：
</div>
<div>
注销客运资格证：
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<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>
</body>
</html>