Как получить функцию ajax .load, чтобы не перегружать всю страницу

Question

Я использую функцию ajax .load для загрузки содержимого и изображений на моем сайте. После щелчка ссылки я хочу, чтобы целевой контент (любая страница с # суб-содержимым) загружался динамически в div #content. Пока код работает при загрузке содержимого. Однако, при первом загрузке любой страницы, кажется, что вся страница по-прежнему перезагружается в браузере. Более конкретно, область левой боковой панели с навигацией и заголовком мигает при нажатии ссылки. Только когда страница загружается в первый раз и кэшируется в браузере, а затем снова щелкнула, что функция загрузки работает так, как я ее хочу. То есть загрузка содержимого без повторной загрузки всей страницы, то есть боковой панели и навигационной системы.

Вопрос: Как я могу заставить этот код работать для ссылки на нужную страницу и загрузить его в #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> 

Script

$(function(){ 

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

});