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 load方法用法集锦,学习jquery的朋友可以参考下。2011-12-12
Jquery Easyui对话框组件Dialog使用详解（14）
这篇文章主要为大家详细介绍了Jquery Easyui对话框组件Dialog的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
昨天做一个Jqery效果，要获取相应元素的索引值，晕，又忘记了。现在记录下来，以后再次忘记好查怎么获取相应元素的索引值2012-10-10
这篇文章主要介绍了jQuery实现表单提交时判断的方法,涉及针对表单提交时的判断方法,是非常实用的技巧,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jQuery实现菜单式图片滑动切换效果，主要是依托于jQuery Lightbox插件来实现，非常炫酷，这里推荐给小伙伴们2015-03-03
jQuery根据纬度经度查看地图处理程序如下在这里要注意js的引入顺序，有需求的朋友可以参考下哈希望对你有所帮助2013-05-05
这篇文章主要为大家详细介绍了jquery插件实现鼠标隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要为大家详细介绍了jquery实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了jQuery CSS3相结合实现时钟插件附源码下载的相关资料,需要的朋友可以参考下2016-01-01
最新评论