AJAX后退按钮菜单问题

Question

我正在使用jquery $ .ajax开发网站来加载我在content /目录中的不同页面的内容.我还使用hashtags来激活后退按钮,重新加载等.

但.我有主菜单和活动项目,如果我在一个主菜单项的深度页面之间导航,它是活动的.然后,我单击其中一个主菜单项,例如"联系人".因此,联系人菜单项变为活动状态.如果我单击浏览器后退按钮,活动菜单项将不会更改.

那么,有没有办法记住活动主菜单项的状态？主菜单位于容器页面上.

谢谢!

$(function(){

        $('.menu a')
            .bind('click',function(e) {
                e.preventDefault();
                $('#content').html('????????, ???????? ?? ?????????? ??? ????????? ? ??????????!');
                $('.menu a').each(function() {$(this).removeClass('activelink');});
                location.hash=$(this).attr('href').match(/(([a-z]*)\W)*/)[2];

                $(this).addClass('activelink');
                return false;
            });

        $('#content').on('click','a',function(e) {
            if (!($(this).hasClass('address') || $(this).hasClass('zoom'))){
            e.preventDefault();
            $('#content').html('????????, ???????? ?? ?????????? ??? ????????? ? ??????????!');
            location.hash=$(this).attr('href').match(/(([a-z]*)\W)*/)[2];
            return false;
            }
            else {
                if ($(this).hasClass('address')) {
                alert('?? ????????? ???? The House Of Events. ????????????? ? ??? ???!');
                }
            }
        });

    function hashChange(){
        var page=location.hash.slice(1);
        if (page!=""){
            $.ajax({
                    type: "GET",
                    url: "content/" + page + ".html #sub-content",
                    success: function(data, status) {
                        $('#content').html(data);
                        },
                    error: function fail() {
                        $('#content').html('Error');
                        }
                });
        }
    }

    if ("onhashchange" in window){
        $(window).on('hashchange',hashChange).trigger('hashchange');
    } else { 
        var lastHash='';
        setInterval(function(){
            if (lastHash!=location.hash)
                hashChange();
            lastHash=location.hash;
        },100);
    }
});

Answer 1

如果你坚持散列标签，你可以创造一个小技巧。

\n\n

编辑这些：

\n\n

$(\'#content\').on(\'click\',\'a\',function(e) {\n  if(!($(this).hasClass(\'address\') || $(this).hasClass(\'zoom\'))){\n    e.preventDefault();\n    $(\'#content\').html(\'\xd0\x98\xd0\xb7\xd0\xb2\xd0\xb8\xd0\xbd\xd0\xb8\xd1\x82\xd0\xb5, \xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd0\xbd\xd0\xb8\xd1\x86\xd0\xb0 \xd0\xbd\xd0\xb5 \xd1\x81\xd1\x83\xd1\x89\xd0\xb5\xd1\x81\xd1\x82\xd0\xb2\xd1\x83\xd0\xb5\xd1\x82 \xd0\xb8\xd0\xbb\xd0\xb8 \xd0\xbd\xd0\xb0\xd1\x85\xd0\xbe\xd0\xb4\xd0\xb8\xd1\x82\xd1\x81\xd1\x8f \xd0\xb2 \xd1\x80\xd0\xb0\xd0\xb7\xd1\x80\xd0\xb0\xd0\xb1\xd0\xbe\xd1\x82\xd0\xba\xd0\xb5!\');\n    var page=location.hash.slice(1).split(\'/\')[0] + \'/\' + $(this).attr(\'href\').match(/(([a-z]*)\\W)*/)[2];\n    location.hash=page;\n    return false;\n  } else {\n    if ($(this).hasClass(\'address\')) {\n      alert(\'\xd0\x92\xd1\x8b \xd0\xbf\xd0\xbe\xd0\xba\xd0\xb8\xd0\xb4\xd0\xb0\xd0\xb5\xd1\x82\xd0\xb5 \xd1\x81\xd0\xb0\xd0\xb9\xd1\x82 The House Of Events. \xd0\x92\xd0\xbe\xd0\xb7\xd0\xb2\xd1\x80\xd0\xb0\xd1\x89\xd0\xb0\xd0\xb9\xd1\x82\xd0\xb5\xd1\x81\xd1\x8c \xd0\xba \xd0\xbd\xd0\xb0\xd0\xbc \xd0\xb5\xd1\x89\xd0\xb5!\');\n    }\n  }\n});\n\nfunction hashChange(){\n  var page=location.hash.slice(1).split(\'/\')[1];\n  if(page===\'undefined\'){\n    page=location.hash.slice(1).split(\'/\')[0];\n  }\n  if(page!=""){\n    $.ajax({\n      type: "GET",\n      url: "content/" + page + ".html #sub-content",\n      success: function(data, status) { $(\'#content\').html(data); },\n      error: function fail() { $(\'#content\').html(\'Error\'); }\n    });\n  }\n}\n

\n\n

您还可以使用 HTML5 历史 API。

\n\n

将其放在点击事件下（删除位置哈希）

\n\n

var active=$(\'.menu a.active\').attr(\'id\'); // or var active=$(\'.menu a.active\').text();\nhistory.pushState({menu: active}, "Our events", "events.html");\n

\n\n

然后使用后退按钮更改内容onpopstate

\n\n

window.onpopstate = function(e){\n  if(e.state){\n    $(\'.menu a.activelink).removeClass(\'activelink\')\n    $(\'.menu #\'+JSON.stringify(e.state.menu).replace(/"/gi,\'\')).addClass(\'activelink\');\n    var url=window.location.pathname;\n    $.ajax({ ... })\n  }\n}\n

\n\n

最后，如果您向菜单项添加很多类并使用以下命令检查它们，那么这一定是愚蠢的方法.hasClass()

\n