Подскажите-ка, есть вот примерчик:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 jQuery History Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script defer src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<script>
$(document).ready(function(){
var
History = window.History,
State = History.getState();
$('.page_item a').live('click', function(e) {
e.preventDefault();
var path = $(this).attr('href');
var title = $(this).attr('title');
History.pushState('ajax',title,path);
});
// Bind to state change
// When the statechange happens, load the appropriate url via ajax
History.Adapter.bind(window,'statechange',function() { // Note: Using statechange instead of popstate
load_ajax_data();
});
function load_ajax_data() {
State = History.getState();
$.post(State.url, function(data) {
$("#content").html(data);
});
}
});
</script>
</head>
<body>
<p>
Use the link below to make a ajax request and see how it changes url address of the browser and also use the back and forward buttons in your browser to navigate the history.
</p>
<ul class="page_item">
<li><a href="page.html?mode=a">First Page</a></li>
<li><a href="page.html?mode=b">Second Page</a></li>
</ul>
<a href="http://localhost:8080/Html5history/NewFile.jsp">Go Back To Tutorial</a>
<div id="content">
</div>
</body>
</html>
если это переход на другой урл <a href="page.html?mode=a">First Page</a>??? так а куда контент вставлять?что такое mode=a?