weixin_33713707 2013-06-08 19:32 采纳率: 0%
浏览 25

是否有方法来记住活动主菜单项的状态?

我正在使用jQuery$.ajax开发网站,以加载内容/目录中不同页面的内容,我还使用哈希标签激活返回按钮、重新加载等。 但是,我有个带有活动项的主菜单,是否有方法来记住活动主菜单项的状态?主菜单位于容器页上。谢谢!

$(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);
    }
});
  • 写回答

1条回答 默认 最新

  • weixin_33725270 2013-06-09 13:26
    关注

    You can create a small trick if you strick to hash tags.

    Edit these:

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

    You can also use HTML5 history API.

    Put this under the click events (delete location hash)

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

    Then to change stuff with the back button use 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({ ... })
      }
    }
    

    And finali the must stupid way if you add a lot of class to the menu items and check them with .hasClass()

    评论

报告相同问题?

悬赏问题

  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题