html5 判断历史记录,html5 history api 实现无刷新浏览以及历史记录管理

html>

body, html, ul, li, dl, dt, dd {

padding: 0px;

margin: 0px;

}

nav {

width: 100px;

display: block;

float: left;

background-color: #c3c3c3;

}

nav ul {

list-style-type: none;

overflow: hidden;

}

nav li {

padding: 0px 6px;

font-size: 20px;

margin-bottom: 10px;

}

nav li:first-child {

margin-top: 10px;

}

nav li a {

text-decoration: none;

}

article {

display: block;

margin-left: 100px;

padding: 10px;

background-color: #ffffff;

}

• home
• about
• photos

title:

url:

description:

$(document).ready(function () {

function update (info) {

$(".title").html(info.title);

$(".url").html(info.url);

$(".description").html(info.description);

}

var stateObj = {

home: {

title: "home",

url: "/home",

description: "this is home page"

},

about: {

title: "about",

url: "/about",

description: "this is about page"

},

photos: {

title: "photos",

url: "/photos",

description: "this is photos page"

}

}

$("nav").on("click", "a", {}, function (event) {

var state = event.target.getAttribute("href").replace(/\//, "");

event.preventDefault();

history.pushState(stateObj[state], "", event.target.href);

update(stateObj[state]);

})

window.addEventListener("popstate", function () {

var state = history.state;

update(state);

});

history.pushState(stateObj["home"], "", "/home");

update(stateObj["home"]);

})