jQuery实现类似滑动门切换效果的层切换
<!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>滑动门切换，jquery层切换代码</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").each(function(i){
$(this).hover(function(){
$(this).addClass("bg").siblings().removeClass("bg");
$(".div:eq("+i+")").show().siblings(".div").hide();
})
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
ul li{ list-style:none; float:left; background-color:#999; cursor:pointer; width:100px; height:25px; line-height:25px; text-align:center;}
ul li.bg{ background-color:#9F0;}
.clr{ clear:both;}
.div{width:200px; height:60px; background:#666; line-height:60px; text-align:center;}
.none{ display:none}
</style>
</head>
<body>
<ul><li class="bg">账户信息</li><li>邮寄地址</li></ul>
<div class="clr"></div>
<div class="div">
第一个div内容
</div>
<div class="div none">
第二个div内容
</div>
</body>
</html>
您可能感兴趣的文章：
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
jQuery实现类似滑动门切换效果的层切换
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
jQuery 滑动方法slideDown向下滑动元素
jquery 点击按钮弹出层 点击空白处隐藏层的实现代码
jQuery相册展示插件 Supersized
15个jQuery和CSS3页面切换动画效果
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
jquery Mobile入门—多页面切换示例学习