ajax .load関数を使用してページ全体を再ロードしない方法

Question

私はajax .load関数を使用して自分のサイトにコンテンツや画像をロードしています。リンクをクリックすると、ターゲットコンテンツ（＃サブコンテンツのあるページ）を#content divに動的に読み込むことができます。これまでのところ、コードはコンテンツを読み込む際に機能します。しかし、ページの最初の読み込み時に、ページ全体がブラウザにまだ読み込まれているようです。具体的には、リンクがクリックされると、左側のサイドバー領域がナビゲーションおよびヘッダー付きで点滅します。ページが初めて読み込まれてブラウザにキャッシュされてから、読み込み機能が希望どおりに機能していることを再度クリックするまではありません。つまり、ページ全体、つまりサイドバーとnavを再読み込みせずにコンテンツを読み込みます。

質問はですこのコードを最初のクリックでページ全体を再読み込みせずに目的のページにリンクして#content divに読み込むにはどうすればよいですか？（以前はコンテンツを読み込むためにiframeを使用していましたが、この方法は明らかに最新のものです。ありがとう!!

ウェブサイトのURL：www.adamclarkart.com

コード：

// Part 1 
$(document).ready(function(){ 
    $("#content").load("beach-1.html"); 
}); 

$(function(){ 

     $('#illustrationsSection a').click(function(){ 
      location.hash=$(this).attr('href').match(/(^.*)\./)[1] 
      return false 
     }) 

     $('#sketchesSection a').click(function(){ 
      location.hash=$(this).attr('href').match(/(^.*)\./)[1] 
      return false 
     }) 

     $('#motionTab a').click(function(){ 
      location.hash=$(this).attr('href').match(/(^.*)\./)[1] 
      return false 
     }) 

     $('#infoTab a').click(function(){ 
      location.hash=$(this).attr('href').match(/(^.*)\./)[1] 
      return false 
     }) 

     $('#info a').click(function(){ 
      location.hash=$(this).attr('href').match(/(^.*)\./)[1] 
      return false 
     }) 
// Part 2 
     var originalTitle=document.title 
     function hashChange(){ 
      var page=location.hash.slice(1) 
      if (page!=""){ 
       $('#content').load(page+".html #sub-content") 
       document.title=originalTitle+' – '+page 
      } 
     } 

// Part 3, ajax spinner .gif 
    $('html') 
    .ajaxStart(function(){ 
     $(this).addClass('ajax-spinner') 
    }) 
    .ajaxStop(function(){ 
     $(this).removeClass('ajax-spinner') 
    }) 

// Part 4 
     if ("onhashchange" in window){ // cool browser 
      $(window).on('hashchange',hashChange).trigger('hashchange') 
     }else{ // lame browser 
      var lastHash='' 
      setInterval(function(){ 
       if (lastHash!=location.hash) 
        hashChange() 
       lastHash=location.hash 
      },100) 
     } 
    }) 

Answer 1

私はjQueryのセレクタを簡単に選択できるように、私はそれらのリンクにクラスを適用します

<a href="media.php" class="ajaxLink">Media</a> 
<a href="photos.php" class="ajaxLink">Photos</a> 
<a href="contact.php" class="ajaxLink">Contact</a> 

スクリプト

$(function(){ 

    $(".ajaxLink").click(function(e){ 
    e.preventDefault(); 
    $("#content").load($(this).attr("url")); 
    }); 

});