jQuery实现类似滑动门切换效果的层切换
更新时间：2013年09月23日 15:42:15 作者：
滑动门切换效果想必大家都有见到过吧，在本文为大家介绍下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="https://www.jb51.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>
相关文章
这篇文章主要介绍了jQuery手机拨号界面特效，整体特效非常逼真自然，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了jQuery实现获取table表格第一列值的方法,涉及jQuery针对table表格元素的遍历与读取相关技巧,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了jQuery简单设置文本框回车事件的方法,涉及jQuery简单事件绑定与响应操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-08-08
这里给大家推荐一款浏览器嗅探的jQuery插件useragent，兼容各大浏览器，在做项目的时候经常要用到，非常的实用2014-11-11
这篇文章主要介绍了jQuery随机密码生成的方法,实例分析了jQuery操作随机数的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
尽管听说jquery的大名几年了，但是一直没有使用过。这两天想在项目中使用被一些小细节折腾的够呛，看来jquery没有传说中的那么好学。2011-04-04
今天刚刚把jquery的插件制作学习了一下，总结一下别人写的和自己的心得，方便其他初学者的学习，考虑到要学习jquery插件制作的人一定知道jquery插件的好处和通用性，这里就不多说2012-02-02
想必大家对于jQuery这个最流行的javascript类库都不陌生，而且只要是前端开发人员肯定或多或少的使用或者接触过，在这篇文章中，参考了一些资料及实际使用效率，将介绍一些书写高质量jQuery代码的原则，不单单会告诉你如何去书写，也会告诉你为什么这样书写，希望大家会觉得有所帮助2014-03-03
这篇文章主要介绍了jquery的hover事件实现两个图片的淡出切换效果，需要的朋友可以参考下2013-06-06
jWiard 基于JQuery的强大的向导控件介绍，需要的朋友可以参考下。2011-10-10
最新评论