<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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://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");
$(".p:eq("+i+")").show().siblings(".p").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;}
.p{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>
<p class="clr"></p>
<p class="p">
第一個p內容
</p>
<p class="p none">
第二個p內容
</p>
</body>
</html>