jq-load.html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ajax局部刷新</title> 5 </head> 6 <body> 7 8 <header> 9 <nav> 10 <a href="jq-load.html" class="current">首頁</a> 11 <a href="jq-load2.html">新聞資訊</a> 12 <a href="jq-load3.html">用戶中心</a> 13 </nav> 14 </header> 15 16 <section id="content"> 17 <div id="container"> 18 首頁的內容 19 </div> 20 </section> 21 22 <script src="js/jquery-1.11.0.min.js"></script> 23 <script src="js/jq-load.js"></script> 24 25 </body> 26 </html>
jq-load.js：
1 $('nav a').on('click', function(e) {
2 e.preventDefault(); // 阻止鏈接跳轉
3 var url = this.href; // 保存點擊的地址
4
5 $('nav a.current').removeClass('current');
6 $(this).addClass('current');
7
8 $('#container').remove();
9 $('#content').load(url + ' #container').fadeIn('slow'); // 加載新內容,url地址與該地址下的選擇器之間要有空格,表示該url下的#container
10 });
第二種：
如果網頁的左側有一個列表，點擊列表使右側的內容進行切換，如果右側的內容過多，不適合做選項卡，這時候用.load()局部刷新最好不過了。上代碼。
user.html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>個人中心</title> 5 <meta charset="utf-8"> 6 <script src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/user.js"></script> 8 </head> 9 <body> 10 11 <div class="userWrap"> 17 <ul class="userMenu"> 18 <li class="current" data-id="center">用戶中心</li> 19 <li data-id="account">賬戶信息</li> 20 <li data-id="trade">交易記錄</li> 21 <li data-id="info">消息中心</li> 22 </ul> 23 <div id="content"></div> 25 </div> 26 27 </body> 28 </html>
user.js：
$(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);
});