jQuery实现类似滑动门切换效果的层切换 - Web前端

作者：98wpeu发布时间：2026-07-18分类：网页前端技术浏览：2

导读：复制代码代码如下:<!DOCtypehtmlPUBLIC"-//W3C//DTDxhtml1.0Transitional//EN""http://www.w3....

复制代码代码如下:
<!DOCtypehtml 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="http://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>

标签：类似效果滑动门 Web jQuery

上一篇：Jquery中给animation加更多的运作效果实例 - Web前端
下一篇：$.get获取一个文件的内容示例代码 - Web前端

jQuery实现类似滑动门切换效果的层切换 - Web前端

相关推荐