写了一个demo使用ajax加载html页面，并且可以跟踪历史前进和后退
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:before, .clearfix:after {display: table;content: " ";}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.lf {float: left;}
.rf {float: right;}
h1{padding:0;margin:0;font-size: 22px;line-height: 30px;}
.main{width:1000px;margin:0 auto;line-height: 30px;padding:50px 20px;}
.main .lf{width:220px;}
.main .lf a{display: block;color:#4E9BD5;text-decoration: none;}
.main .lf a.active,.main .lf a:hover{color:green;}
.main .rf{width:700px;}
</style>
</head>
<body>
<div class="main">
<div class="lf" id="item">
<a href="#!h1" class="actve">我是h1</a>
<a href="#!h2">我是h2</a>
<a href="#!h3">我是h3</a>
<a href="#!h4">我是h4</a>
<a href="#!h5">我是h5</a>
</div>
<div class="rf" id="content">
这是内容
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="hashchange.js"></script>
</body>
</html>
hashchange.js
function setUser(_url){
$.ajax({
url: _url,
type: "GET",
success: function(data){
$('#content').html(data);
}
});
}
$('#item a').click(function(){$(this).addClass('active').siblings().removeClass('active');});
function changeHashCallBack(){//hash变化之后，回调函数会被触发
var hash = location.hash?location.hash:'#h1';
var result = hash.substring(2);
setUser(result+'.html');
}
if(document.all && !document.documentMode){
/* 低于IE8的IE系列采用定时器监听 */
setInterval(changeHashCallBack, 300);
}else{
window.onhashchange = changeHashCallBack;
}
changeHashCallBack();
h1.html
<h1>我是h1</h1>
h2.html
<h1>我是h2</h1>
<h1>我是h2</h1>
h3.html
<h1>我是h3</h1>
<h1>我是h3</h1>
<h1>我是h3</h1>
h4.html
<h1>我是h4</h1>
<h1>我是h4</h1>
<h1>我是h4</h1>
<h1>我是h4</h1>
h5.html
<h1>我是h5</h1>
<h1>我是h5</h1>
<h1>我是h5</h1>
<h1>我是h5</h1>
<h1>我是h5</h1>
发表评论：