AJAX返回按钮菜单问题

Question

AJAX返回按钮菜单问题

jqueryajax

5

我正在使用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);
    }
});

- Alex Holxey

发布您的主菜单代码以查看它如何激活菜单项。 - Nagarjun

检查 history.pushState() - d-_-b

问题在于我不知道如何确定此子菜单页面的主菜单项。或者是我理解有误？ - Alex Holxey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nergal · Answer 1

如果您坚持使用哈希标签，您可以创建一个小技巧。

编辑这些：

$('#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() 进行检查，则是最愚蠢的方法。