<!DOCTYPE html>
<html lang="en">
<head>
<title>ajax局部刷新</title>
<style>
.userMenu {
float: left;
width: 200px;
}
#content {
float: left;
}
</style>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="userWrap">
<ul class="userMenu">
<li 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>
</body>
<script>
$(function() {
$(".userMenu").on("click", "li", function() {
var sId = $(this).data("id"); //获取data-id的值
window.location.hash = sId; //设置锚点
loadInner();
});
function loadInner() {
var sId = window.location.hash;
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); //加载相对应的内容
$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
}
var sId = window.location.hash;
loadInner();
});
</script>
</html>
转自https://blog.csdn.net/qq_38822390/article/details/81014417