jQuery+ajax实现局部刷新
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);
});
