AJAX 뒤로 버튼 메뉴 문제

Question

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

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