jQuery实现类似滑动门切换效果的层切换


Posted in Javascript onSeptember 23, 2013
<!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://3water.com/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>
Javascript 相关文章推荐
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
基于Angularjs实现分页功能
May 30 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
JS 实现导航栏悬停效果
Sep 23 #Javascript
jquery购物车实时结算特效实现思路
Sep 23 #Javascript
js下拉菜单语言选项简单实现
Sep 23 #Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 #Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 #Javascript
js/html光标定位的实现代码
Sep 23 #Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 #Javascript
You might like
Views rows style模板重写代码
2011/05/16 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
js实现登录与注册界面
2017/11/01 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
js中url对象化管理分析
2017/12/29 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
小学毕业感言300字
2014/02/19 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
党小组鉴定意见
2015/06/02 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
退货证明模板
2015/06/23 职场文书
cf战队宣传语
2015/07/13 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
python xlwt模块的使用解析
2021/04/13 Python
Python实现滑雪小游戏
2021/09/25 Python