编程 Javascript

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 相关文章推荐

js类中的公有变量和私有变量

Jul 24 Javascript

一个原生的用户等级的进度条

Jul 03 Javascript

JavaScript下利用fso判断文件是否存在的代码

Dec 11 Javascript

js一般方法改写成面向对象方法的无限级折叠菜单示例代码

Jul 04 Javascript

Chrome下ifame父窗口调用子窗口的问题示例探讨

Mar 17 Javascript

大型JavaScript应用程序架构设计模式

Jun 29 Javascript

浅谈使用splice函数对数组中的元素进行删除时的注意事项

Dec 04 Javascript

Angular.js之作用域scope'@','=','&'实例详解

Feb 28 Javascript

微信小程序实现tab和swiper切换结合效果

Jul 17 Javascript

ng-zorro-antd 入门初体验

Dec 03 Javascript

JointJS JavaScript流程图绘制框架解析

Aug 15 Javascript

原生js 实现表单验证功能

Feb 08 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