js滑动门效果
js滑动门效果，效果示例图如下：
具体代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动门效果</title>
<style type="text/css">
*{margin:0 auto;padding:0;}
body{font:12px "宋体";text-align:center;}
a:link,a:visited{color:#999;text-decoration:none;}
a:hover{color:#666;text-decoration:underline;}
ul{list-style:none;}
li{color:#999;height:22px;line-height:22px;border-bottom:#eee 1px dashed;}
.main{clear:both;padding:8px;text-align:center;}
#tabs1{text-align:left;width:300px;margin:20px auto;}
.menu1box{overflow:hidden;height:26px;text-align:left;border:0 solid #E4E4E4;border-width:1px 1px 0 1px;background-color:#ffc;}
#menu1 li{float:left;display:block;cursor:pointer;width:80px;text-align:center;line-height:24px;height:24px;padding-top:2px;border-bottom:none;}
#menu1 li.hover{color:#0DA5E6;font-weight:bold;background:none no-repeat scroll center top #FFFFFF;border:0 solid #E4E4E4;border-width:0 1px 0 1px;}
.main1box{clear:both;margin-top:-1px;border:1px solid #E4E4E4;}
#main1 ul{display:none;text-align:left;}
#main1 ul.block{display:block;}
</style>
<script type="text/javascript">
function setTab(m, n) {
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for (i=0;i<tli.length;i++) {
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
</head>
<body>
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onMouseOver="setTab(1,0)">php笔记</li>
<li onMouseOver="setTab(1,1)">数据库教程</li>
<li onMouseOver="setTab(1,2)">javascript教程</li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block">
<li><a href="#">PHP的echo输出内容过多会很慢</a></li>
<li><a href="#">如何知道服务器是否支持Gzip压缩</a></li>
<li><a href="#">php获取QQ头像的两种方法</a></li>
</ul>
<ul>
<li><a href="#">truncate的用法</a></li>
<li><a href="http://php.hhsy.cc/mysql/998.html">mysql存储过程详解</a></li>
<li><a href="#">mysql服务器主从数据库同步配置</a></li>
<li><a href="#">修改xampp mysql默认空密码的方法</a></li>
</ul>
<ul>
<li><a href="#">js tab滑动门效果</a></li>
<li><a href="#">jquery动画删除效果</a></li>
<li><a href="http://php.hhsy.cc/jquery/960.html">Jquery动画效果简单总结</a></li>
<li><a href="#">jquery QQ 表情插件分享</a></li>
<li><a href="#">JQuery中阻止事件冒泡方式及其区别</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>上一篇：js实现图片放大缩小
下一篇：sql注入实例