（1）實現方法：采用ajax實現點擊左側菜單，右側加載不同網頁（在整個頁面無刷新的情況下實現右側局部刷新，用到ajax注意需要在服務器環境下運行，從HBuilder自帶的服務器中打開瀏覽效果即可）
（2）原理：ajax的局部刷新原理：通過.load()重新加載頁面中的某一部分，巧妙的借助data-*的自定義屬性來存儲數據，點擊的時候修改錨點，因為地址有變，所以刷新的時候仍然會保持當前的頁面內容而不是切換到第一個。
（3）適用場景：遇到ajax局部刷新的需求也有很多，有時候比較簡單，當內容較少，適合做成選項卡；如果網頁的左側有一個列表，點擊列表使右側的內容進行切換，如果右側的內容過多，不適合做選項卡，這時候用.load()局部刷新最好不過了，在項目中經常使用到流程管理后台，便是左右結構布局，這個時候，簡單的demo示例如下
<!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 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>
</body>
<script>
$(function() {
$(".userMenu").on("click", "li", function() {
var sId = $(this).data("id"); //獲取data-id的值
window.location.hash = sId; //設置錨點
loadInner(sId);
});
function loadInner(sId) {
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(sId);
});
</script>
</html>
創建右側對應的幾個新的html頁面user_center.html，user_account.html，user_trade.html，user_info.html
user_center.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
用戶中心
用戶中心
用戶中心
</div>
</body>
</html>
user_account.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
賬戶信息
賬戶信息
賬戶信息
</div>
</body>
</html>
user_trade.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
交易中心
交易中心
交易中心
</div>
</body>
</html>
user_info.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
消息中心
消息中心
消息中心
</div>
</body>
</html>