一个简单的滑动门效果-中考模拟 - 常州市新北区奔牛初级中学

栏目列表

当前位置：首页>>化学家园>>习题下载>>中考模拟>>文章内容

一个简单的滑动门效果

发布时间：2008-12-17 点击：来源：中国IT人才网作者：will2011

[导读]简单实用的滑动门效果哦！赶紧看看！

简单实用的滑动门效果哦！赶紧看看！

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://{域名已经过期}/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://{域名已经过期}/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个简单的滑动门效果--中国IT人才网!IT求职,IT招聘</title>
</head>
<body>
<style type="text/css">
/*基本样式定义开始*/
*{ margin:0; padding:0;}
body { font-size:12px; line-height:150%;}
td{ height:22px; padding:6px;}
a{font-size:12px; color:#000000; text-decoration:none;}
a:link{color: #000000;}
a:visited{color: #000000;}
a:hover{text-decoration: underline; color:#000000;}
a:active{color:#000000;}
img{border:none;}
ul,li{ list-style-type:none;}
/*基本样式定义完成*/
.container{ width:400px; margin:30px auto;}
.nav{width:244px; height:22px; line-height:22px; margin:0 auto; border:#94D5F3 1px solid; border-right:none; border-bottom:none;}
.nav li{ float:left;}
.nav li a{display:block; width:60px; float:left; text-align:center;}
.nav .li1 a{border-bottom:#94D5F3 1px solid; border-right:#94D5F3 1px solid;  background-color:#DBF2FD;}
.nav .li2 a{border-bottom:none; background-color:#fff; border-right:#94D5F3 1px solid;}
.nav li a:hover{background-color:#fff; text-decoration:none;}
.nav_con{ width:223px; height:60px; padding:10px; border:#94D5F3 1px solid; border-top:none; margin:0 auto;}
</style>
<script language="javascript">
function show(id)
{
for(j=1;j<5;j++) 
{ 
 if(id==j)
 { 
  document.getElementById("nav"+j).className="li2"; 
  document.getElementById("nav_con"+j).style.display=""; 
 } 
 else 
 { 
  document.getElementById("nav"+j).className="li1"; 
  document.getElementById("nav_con"+j).style.display="none"; 
 } 
} 
}
</script>
</body>
<div class="container">
 <div class="nav">
  <li id="nav1" class="li2"><a href="javascript:void(0);" onclick="show(1);">人才首页</a></li>
  <li id="nav2" class="li1"><a href="javascript:void(0);" onclick="show(2);">个人求职</a></li>
  <li id="nav3" class="li1"><a href="javascript:void(0);" onclick="show(3);">企业招聘</a></li>
  <li id="nav4" class="li1"><a href="javascript:void(0);" onclick="show(4);">网络编程</a></li>
 </div>
 <div class="nav_con">
  <li id="nav_con1"><a href="http://{域名已经过期}" target="_blank">人才首页</a></li>
  <li id="nav_con2" style="display:none;"><a href="http://{域名已经过期}/Person/" target="_blank">个人求职</a></li>
  <li id="nav_con3" style="display:none;"><a href="http://{域名已经过期}/Company/" target="_blank">企业招聘</a></li>
  <li id="nav_con4" style="display:none;"><a href="http://{域名已经过期}/Programming/" target="_blank">网络编程</a></li>
 </div>
</div>
</html>

[可先修改部分代* 再运行查看效果]

关闭窗口

打印文档

附件：