AJAX로드로 해시 태그 URL을 직접 작성하십시오.

Question

해시 태그 AJAX 시스템을 사용하여 웹 사이트를 구축하십시오.

각 페이지에 해시 태그가 있습니다. 예 :

<a href="#page1">Page 1</a> 
<a href="#page2">Page 2</a> 

모두 잘 작동합니다. 문제는 원활하게 작동하지 않는다는 것입니다.

페이지 2를 누르면 아무 일도 일어나지 않지만 URL이 # page2로 변경됩니다. 그런 다음 페이지 1을 누르면 URL이 # page1로 변경되지만 페이지 2 대신 Page 2가 표시됩니다.

또한 index.php으로 갈 때 홈 해시 태그 페이지로 리디렉션하려고합니다. 예를 들어. index.php#home

그 중 하나가 작동하지 않는 것 같습니다.

$(document).ready(function() { 

    if(window.location.hash == ''){ 

     document.getElementById('link_hem').click(); 

    } 

    //highlight the selected link 
    $('a[href=' + document.location.hash + ']').addClass('active'); 

    //Seearch for link with REL set to ajax 
    $('#menu a').click(function() { 

     //grab the full url 
     var hash = this.href; 

     //remove the # value 
     hash = hash.replace(/^.*#/, ''); 

     //clear the selected class and add the class class to the selected link 
     $('a[rel=ajax]').removeClass('active'); 
     $(this).addClass('active'); 

     //hide the content and show the progress bar 
     $("#menu img#logo").attr("src", "ajax/loader.gif"); 

     //run the ajax 
     getPage(); 
    }); 
}); 


function pageload(hash) { 
    //if hash value exists, run the ajax 
    if (hash) getPage();  
} 

function getPage() { 

    //generate the parameter for the php script 
    var data = 'page=' + encodeURIComponent(document.location.hash); 
    var page = window.location.hash.substring(1); 

    $.ajax({ 
     url: "ajax/retriever.php", 
     type: "GET",   
     data: data,  
     cache: false, 
     success: function (html) { 

      //hide the progress bar 
      $("#menu img#logo").attr("src", "images/menu_logo.png");  

      //add the content retrieved from ajax and put it in the #content div 
      $('#page').html(html); 

     }  
    }); 
} 

가 어떻게 클릭에 행동을해야합니까 : 여기

내 코드? Page 1을 클릭하거나 URL에 # page1을 입력하면 page1의 내용이 직접 표시됩니다.

미리 감사드립니다.

Answer 1

변수 해시를 함수에 전달하고 데이터 검색 자로 사용하여 해결했습니다.

$(document).ready(function() { 

    if(window.location.hash == ''){ 

     document.getElementById('link_hem').click(); 

    } 

    //highlight the selected link 
    $('a[href=' + document.location.hash + ']').addClass('active'); 

    //Seearch for link with REL set to ajax 
    $('#menu a').click(function() { 

     //grab the full url 
     var hash = this.href; 

     //remove the # value 
     hash = hash.replace(/^.*#/, ''); 

     //clear the selected class and add the class class to the selected link 
     $('a[rel=ajax]').removeClass('active'); 
     $(this).addClass('active'); 

     //hide the content and show the progress bar 
     $("#menu img#logo").attr("src", "ajax/loader.gif"); 

     //run the ajax 
     getPage(hash); 
    }); 
}); 


function pageload(hash) { 
    //if hash value exists, run the ajax 
    if (hash) getPage();  
} 

function getPage(hash) { 

    //generate the parameter for the php script 
    var data = 'page=%23' + hash; 
    var page = window.location.hash.substring(1); 

    $.ajax({ 
     url: "ajax/retriever.php", 
     type: "GET",   
     data: data,  
     cache: false, 
     success: function (html) { 

      //hide the progress bar 
      $("#menu img#logo").attr("src", "images/menu_logo.png");  

      //add the content retrieved from ajax and put it in the #content div 
      $('#page').html(html); 

     }  
    }); 
}