<ul class="menu"><li><a href="/home/index#page=1">page1</a></li><li><a href="/home/index#page=2">page2</a></li><li><a href="/home/index#page=3">page3</a></li>
</ul><div id="mainPanel">
</div>

<script type="text/javascript">//获取指定key的hash值function getHash(key, url) {var hash;if (!!url) {hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");hash = (hash == url) ? "" : hash;} else {hash = self.location.hash;}hash = "" + hash;hash = hash.replace(/^[?#]/, '');hash = "&" + hash;var val = hash.match(new RegExp("[\&]" + key + "=([^\&]+)", "i"));if (val == null || val.length < 1) {return null;} else {return decodeURIComponent(val[1]);}}</script>

到这里工作已经完成了80%，为什么是80%呢，这里面还有一个问题：

当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址：http://localhost:3859/home/index#page=3 或者通过QQ发给你的好友，看到的并不是如你所想的应该是page=3的内容，而是http://localhost:3859/home/index 的内容。原因很简单——页面加载的时候不会触发onhashchange事件。

所以我们要在上面的代码追加一行：

       function loadPanel() {var page = getHash("page");if (page == 1) {$("#mainPanel").load("/home/page1");}if (page == 2) {$("#mainPanel").load("/home/page2");}if (page == 3) {$("#mainPanel").load("/home/page3");}}$(window).bind("hashchange", loadPanel);</script>
$(loadPanel);
//或者
$(function(){ $(window).trigger("hashchange"); });

<script src="/Scripts/jquery.history.js" type="text/javascript"></script>
<script type="text/javascript">$(function () {$.history.init(function (hash) {var page = getHash("page");if (page == 1) {$("#mainPanel").load("/home/page1");}if (page == 2) {$("#mainPanel").load("/home/page2");}if (page == 3) {$("#mainPanel").load("/home/page3");}});});
</script>

<script src="/Scripts/jquery.ba-hashchange.js" type="text/javascript"></script>
<script type="text/javascript">$(window).hashchange(function () {var page = getHash("page");if (page == 1) {$("#mainPanel").load("/home/page1");}if (page == 2) {$("#mainPanel").load("/home/page2");}if (page == 3) {$("#mainPanel").load("/home/page3");}});$(window).hashchange();
</script>