HTML5 history

            <
            div 
            class
            ="header"
            >head</div><div class="center"><!-- 左边的选菜项 --><div class="cho_left"><ul id="choMenu" class="rel cho_menu"><li><a href="ajax.aspx?area=pudong" class="cho_link cho_link_on">浦东区</a></li><li><a href="ajax.aspx?area=baoshan" class="cho_link">宝山区</a></li><li><a href="ajax.aspx?area=jiading" class="cho_link ">嘉定区</a></li><li><a href="ajax.aspx?area=qingpu" class="cho_link">青浦区</a></li><li><a href="ajax.aspx?area=minhang" class="cho_link">闵行区</a></li><li><a href="ajax.aspx?area=putuo" class="cho_link">普陀区</a></li><li><a href="ajax.aspx?area=jinshan" class="cho_link">金山区</a></li><li><a href="ajax.aspx?area=songjiang" class="cho_link">松江区</a></li><li><a href="ajax.aspx?area=zhabei" class="cho_link">闸北区</a></li><li><a href="ajax.aspx?area=fengxian" class="cho_link">奉贤区</a></li><li><a href="ajax.aspx?area=huangpu" class="cho_link">黄浦区</li><li><a href="ajax.aspx?area=changning" class="cho_link">长宁区</a></li><li><a href="ajax.aspx?area=jingan" class="cho_link">静安区</a></li><li><a href="ajax.aspx?area=zhoubian" class="cho_link">上海周边</a></li></ul></div><!-- 右侧主列表 --><div class="cell"><div id="listBox">
                右侧显示相应的内容
            </div></div></div><div class="header">footer</div>

            //
            给每个左侧链接绑定事件
            var eleMenus = $("#choMenu a").bind("click", function (event) {
            //获得querystring的值var query = this.href.split("?")[1];
            //将左侧列表链接全部去掉高亮
            $("#choMenu a").removeClass(‘cho_link_on‘);
            //给当前点击的链接加高亮
            $(this).addClass(‘cho_link_on‘);
            //如果存在history.pushState状态  且有queryString的值if (history.pushState && query) {
                var curText = $(this).text();
                //给右侧内容框赋值
                $(‘#listBox‘).text(curText);
                // history处理
                document.title = "history demo-" + curText;
                if (event && /\d/.test(event.button)) {
                    //history.pushState使得页面的URL地址变化了
                    history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query);
                }
            }
            returnfalse;
        });

        var fnHashTrigger = function (target) {
            var query = location.href.split("?")[1], eleTarget = target || null;
            //页面首次载入，没有queryString的值if (typeof query == "undefined") {
                if (eleTarget = eleMenus.get(0)) {
                    // 如果没有查询字符，则使用第一个导航元素的查询字符内容
                    history.replaceState(null, document.title, location.href.split("#")[0] + "?" + eleTarget.href.split("?")[1]) + location.hash;
                    fnHashTrigger(eleTarget);
                }
            } else {
                eleMenus.each(function () {
                    if (eleTarget === null && this.href.split("?")[1] === query) {
                        eleTarget = this;
                    }
                });

                if (!eleTarget) {
                    // 如果查询序列没有对应的导航菜单，去除查询然后执行回调
                    history.replaceState(null, document.title, location.href.split("?")[0]);
                    fnHashTrigger();
                } else {
                    $(eleTarget).trigger("click");
                }
            }
        };

        if (history.pushState) {
            //页面无刷新的，原先ajax请求的数据加载过来了  这就是popstate事件的作用
            window.addEventListener("popstate", function () {
                fnHashTrigger();
            });

            // 默认载入            fnHashTrigger();
        }