ajax点击左侧右侧页面刷新,ajax实现简单的点击左侧菜单，右侧加载

实现：ajax实现点击左侧菜单，右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可)

图片.png

原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

遇到ajax局部刷新的需求也有很多，有时候比较简单，当内容较少，适合做成选项卡，如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了，在项目中经常使用到流程管理后台，便是左右结构布局，这个时候，简单的demo示例如下html>

ajax局部刷新

.userMenu {                float: left;                width: 200px;

}

#content {                float: left;

}        

• 用户中心
• 账户信息
• 交易记录
• 消息中心

$(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);

});    

创建右侧对应的几个新的html页面user_center.html，user_account.html，user_trade.html，user_info.html

user_center.htmlhtml>

用户中心

用户中心

用户中心

user_account.htmlhtml>

账户信息

账户信息

账户信息

user_trade.htmlhtml>

交易中心

交易中心

交易中心

user_info.htmlhtml>

消息中心

消息中心

消息中心

作者：祈澈菇凉

链接：https://www.jianshu.com/p/d47812f275c1