シームレスページをAJAXで変更する

Question

私は自分のウェブサイトページをシームレスに読み込もうとしています。下のリンクのページをクリックすると、私が何を話しているのかが分かります。

http://www.ultranoir.com/

http://www.itsmassive.com/

あなたはそれが情報および/＃をロードしますリンクをクリックしたとき！/ URLに追加されます。私のページが同じようにロードされるように、この機能をどのように追加するのですか？どこでもチュートリアルはありますか？

Answer 1

これは、hashchangeというイベントです。ページをリロードせずに#!の後に値を変更してから、AJAXを使用して必要な情報を読み込むことができます。 HTML5をサポートする新しいブラウザを使用している場合は、History.pushStateを使用して同様の方法でURLバーを変更できます。

基本的に、リンクにイベントを追加し、URLを変更して（location.hashまたはpushStateを使用）、AJAX経由でデータを読み込むことができます。

Hereは、pushStateの場合、location.hash、and here'sのいずれかのまともな例です。

良いクロスブラウザソリューションについては、History.jsをお勧めします。

History.jsを使用する場合は、ページにスクリプトを追加した後、JavaScriptを少し追加する必要があります。

$('a.hash').click(function(e){ // For all links with the class "hash" 
    e.preventDefault(); // Don't follow link 
    History.pushState(null, '', this.href); // Change the current URL (notice the capital "H" in "History") 
    $('#content').slideUp('slow', function(){ // Animate it sliding up 
     var $this = $(this); 
     $this.load(this.href, function(){ // Use AJAX to load the page (or do whatever) 
      $this.slideUp('slow'); // Slide back down 
     }); 
});