<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin:0;
}
#list{
width:40px;
border:1px solid #ccc;
height: 150px;
display: flex;
flex-direction: column;
float: left;
list-style: none;
}
li{
flex: 1;
}
#content-main{
width: 220px;
height: 150px;
border:1px solid #ccc;
color: #FF3300;
float: left;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<ul id="list" class="list">
<li><a href="#beijing">北京</a></li>
<li><a href="#shanghai">上海</a></li>
<li><a href="#guangzhou">广州</a></li>
<li><a href="#shenzhen">深圳</a></li>
<li><a href="#hangzhou">杭州</a></li>
</ul>
<div id="content-main" class="content-main">
</div>
<script>
var _history = [];
$(function () {
$('#content-main').text($("#list").find("li a").eq(0).attr('href').split("#")[1]);
window.addEventListener('popstate',function (e) {
console.log(e.state.hash);
$('#content-main').text(e.state.hash.split('#')[1]);
});
$("#list").on("click",'a',function (e) {
var action = $(this).attr('href').split("#")[1];
showContent(action);
});
});
function showContent(text) {
$('#content-main').text(text);
_history.unshift({hash:'#'+text});
window.history.pushState({hash:'#'+text},"",'#'+text);
console.log(_history);
}
</script>
</body>
</html>window.history.pushState();
window.history.replaceState();
obj.addEventListener(‘popstate’,function(e){
conosole.log(e.state);
})
这是进行单页面开发的主要的三个history Api