AJAXバックボタンメニューの問題

Question

コンテンツ/ディレクトリにある別のページのコンテンツを読み込むためにjquery $ .ajaxを使用してWebサイトを開発しています。また、バックボタン、リロードなどを有効にするためにハッシュタグを使用しています。

しかし、アクティブなアイテムを持つメインメニューがあります。メインメニュー項目の1つのページの間を移動すると、アクティブになります。次に、連絡先などのメインメニュー項目の1つをクリックします。したがって、連絡先メニュー項目がアクティブになります。ブラウザの戻るボタンをクリックすると、アクティブなメニュー項目は変更されません。

アクティブなメインメニュー項目の状態を覚えておく方法はありますか？メインメニューはコンテナページにあります。

ありがとうございました！

$(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

ハッシュタグを使う場合は小さなトリックを作成できます。

編集これら：

$('#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を使用することができます。

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({ ... }) 
    } 
} 

を使用してバックボタンでものを変更するには次に（場所のハッシュを削除）クリックイベントの下

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

これを入れて、あなたは多くのことを追加した場合必須愚かな道をfinaliメニュー項目にクラスを追加してチェックしてください。.hasClass()