通過data-id傳值到window.location.hash,修改錨點來加載對應(yīng)的局部內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<title>個人中心</title>
<meta charset="utf-8">
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<div class="userWrap">
<ul class="userMenu">
<li class="current" data-id="center">用戶中心</li>
<li data-id="account">賬戶信息</li>
<li data-id="trade">交易記錄</li>
<li data-id="info">消息中心</li>
</ul>
<div id="content">用戶中心</div>
</div>
<script>
$(function(){
$(".userMenu").on("click", "li", function(){
var sId = $(this).data("id"); //獲取data-id的值
window.location.hash = sId; //設(shè)置錨點
loadInner(sId);
});
function loadInner(sId){
var sId = window.location.hash;//獲取當(dāng)前錨點值
var pathn, i;
switch(sId){
case "#center": pathn = "user_center.html"; i = 0; break;
case "#account": pathn = "user_account.html"; i = 1; break;
case "#trade": pathn = "user_trade.html"; i = 2; break;
case "#info": pathn = "user_info.html"; i = 3; break;
default: pathn = "user_center.html"; i = 0; break;
}
$("#content").load(pathn+' #content'); //加載相對應(yīng)content的內(nèi)容
$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //當(dāng)前列表高亮
}
});
</script>
</body>
</html>
