AJAX zurück Knopfmenü Problem

Question

Ich entwickle Website mit jquery $ .ajax zum Laden von Inhalt von verschiedenen Seiten, die ich in Inhalt/Verzeichnis habe. Ich benutze auch Hashtags, um den Zurück-Knopf zu aktivieren, neu zu laden, usw.

ABER. Ich habe ein Hauptmenü mit aktiven Elementen, und wenn ich zwischen den Seiten in der Tiefe des einen Hauptmenüpunkts navigiere, ist es aktiv. Dann klicke ich auf einen der Hauptmenüpunkte, zum Beispiel Kontakte. So wird der Menüpunkt "Kontakte" aktiv. Und wenn ich auf die Zurück-Schaltfläche des Browsers klicke, ändert sich der aktive Menüpunkt nicht.

Also, gibt es eine Möglichkeit, den Status des aktiven Hauptmenüpunktes zu erinnern? Das Hauptmenü befindet sich auf der Containerseite.

Vielen Dank!

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

Sie können einen kleinen Trick erstellen, wenn Sie zu Hash-Tags stricken.

bearbeiten diese:

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

Sie können auch HTML5 Geschichte API verwenden.

unter den Click-Ereignisse Setzen Sie diese (Position Hash löschen)

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

Dann Sachen mit der Zurück-Taste 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({ ... }) 
    } 
} 

Und Finali den Most dumme Art, wenn Sie viel hinzufügen, verwenden zu ändern von Klasse zu den Menüpunkten und überprüfen Sie sie mit .hasClass()