<style id="xgry0"></style>

jQuery實(shí)現(xiàn)類似滑動門切換效果的層切換

2024-05-06 15:52:20

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

滑動門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實(shí)現(xiàn)層切換的

復(fù)制代碼代碼如下:

<!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="http://www.codefans.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>賬戶信息</li><li>郵寄地址</li></ul>
<div></div>
<div>
第一個div內(nèi)容
</div>
<div>
第二個div內(nèi)容
</div>
</body>
</html>