以前都用iframe做左面菜单右面页面的切换，但是iframe不仅比较老化而且漏洞比较多比较麻烦，所以网上找了很多代替的办法，发现ajax不错，但是纯ajax做又少了前进后退的功能，所以需要结合HTML5的pushState，来实现前进与后退的功能，用ajax来实现也许还会有别的坑，但是目前还没有发现，等发现会继续总结
结合例子来学会这个功能，参考的网站https://blog.csdn.net/DecadentF/article/details/77982511
html代码
<!--两个菜单按钮，阻止a跳转，按钮中有点击事件，事件将网页名称封装为参数-->
<div class=""><a href="javascript:;" onclick="turnpage('rates')">待评价</a></div>
<div class=""><a href="javascript:;" onclick="turnpage('rated')">已评价</a></div>
<!--ajax加载的内容区域-->
<div class="mainbox">
</div>
jq代码
window.onload = function(){ //页面刚加载或刷新时
var url0 = document.URL; //获取地址栏
var num = url0.indexOf('?'); //判断有没有?
var oldurl;
var loadurl = num==-1?"rates":url0.slice(num+1, url0.length)
//没有？加载指定页面，有？加载？后面的
ajax1(loadurl)
}
window.onpopstate = function(event) { //前进后退事件
if(event.state == null){ //如果没有state，退到最后了就不再退
return
}else{
ajax1(event.state.urld) //否则就退
}
};
function turnpage(url) { //点击加载页面
var url0 = document.URL; //获取地址栏
var num = url0.indexOf('?'); //判断有没有?
var oldurl;
if(num == -1) { //没有？oldurl为整个地址栏内容
oldurl = url0;
} else {
oldurl = url0.slice(0, num); //有？oldurl为？之前的
}
var newurl = oldurl + '?' + url; //根据点击的重新拼接url
if(url0==newurl)return false; //如果重复点击同一链接不重复加载
history.pushState({id:"5",title:"123",urld:url}, "标题", newurl);
ajax1(url)
}
function ajax1(url){ //封装的ajax
$.ajax({ //点击菜单时加载相应页面
type: "get",
url: url+'.html',
success: function(html) {
$('.mainbox').html(html);
}
});
}
