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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
js表格分页实现代码
Sep 18 Javascript
javascript打印输出json实例
Nov 11 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
php session 检测和注销
2009/03/16 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python functools模块学习总结
2015/05/09 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python之修改图片像素值的方法
2019/07/03 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
教育局长自荐信范文
2013/12/22 职场文书
给国外客户的邀请函
2014/01/30 职场文书
法制宣传标语集锦
2014/06/25 职场文书
工作态度检讨书范文
2015/05/06 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python