jquery之AJAX后退按钮菜单问题

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

但是。我的主菜单包含事件项目，如果我在一个主菜单项目的深度页面之间导航，则它是事件的。然后，我单击主菜单项之一，例如“联系人”。因此，联系人菜单项变为事件状态。如果我单击浏览器后退按钮，事件菜单项不会更改。

那么，有什么方法可以记住事件主菜单项的状态吗？主菜单位于容器页面。

谢谢!

$(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); 
    } 
}); 

请您参考如下方法:

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

编辑这些:

$('#content').on('click','a',function(e) { 
  if(!($(this).hasClass('address') || $(this).hasClass('zoom'))){ 
    e.preventDefault(); 
    $('#content').html('Извините, страница не существует или находится в разработке!'); 
    var page=location.hash.slice(1).split('/')[0] + '/' + $(this).attr('href').match(/(([a-z]*)\W)*/)[2]; 
    location.hash=page; 
    return false; 
  } else { 
    if ($(this).hasClass('address')) { 
      alert('Вы покидаете сайт The House Of Events. Возвращайтесь к нам еще!'); 
    } 
  } 
}); 
 
function hashChange(){ 
  var page=location.hash.slice(1).split('/')[1]; 
  if(page==='undefined'){ 
    page=location.hash.slice(1).split('/')[0]; 
  } 
  if(page!=""){ 
    $.ajax({ 
      type: "GET", 
      url: "content/" + page + ".html #sub-content", 
      success: function(data, status) { $('#content').html(data); }, 
      error: function fail() { $('#content').html('Error'); } 
    }); 
  } 
} 

您还可以使用 HTML5 历史 API。

将其放在点击事件下(删除位置哈希)

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

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

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

最后，如果您向菜单项添加大量类并使用 .hasClass() 检查它们，那么这一定是愚蠢的方法。