Comment puis-je créer un système de navigation dynamique en chargeant une page dans un div?

Question

J'essaye de créer un système de navigation où il y a un ensemble de liens, qui une fois cliqué, chargera une page externe dans un div. Voilà ce que j'ai jusqu'à présent, mais il ne fonctionne pas:

<div class="row"> 
    <a href="link1" class="loadPage"><div class="col-md-4"><div class="navActive">Link1</div></div></a> 
    <a href="link2" class="loadPage"><div class="col-md-4"><div class="">Link2</div></div></a> 
    <a href="link3" class="loadPage"><div class="col-md-4"><div class="">Link3</div></div></a> 
</div> 

$(document).ready(function() { 
    $('.loadPage').click(function(e){ 
     e.preventDefault(); 
     var curActive = document.querySelectorAll(".navActive"); 
     for (i=0;i<curActive.length;i++) 
      curActive[i] = curActive[i].className.replace(/(?:^|\s)navActive(?!\S)/g , ''); 
     e.preventDefault(); 
     $('.targetLoad') 
      .hide() 
      .load(this.href), function() { 
       $(this).fadeIn(500); 
      }); 
     $(this + ' div div').addClass('navActive'); 
    }); 
}); 

Answer 1

Vous avez quelques erreurs dans votre c ode:

1. .load(this.href*)*, function() {...); doit être .load(this.href, function() {. Vous voulez spécifier un rappel complet. Pas seulement déclarer une expression de fonction, n'est-ce pas?
2. this div div Qu'est-ce que c'est? Vous avez besoin de $(this).find('div > div').

Récapitulatif.

$(function() { 
    $('.loadPage').click(function(e){ 
     var activeCls = 'navActive'; 
     e.preventDefault(); 
     $('.' + activeCls).removeClass(activeCls); 
     $('.targetLoad') 
      .hide() 
      .load(this.href, function() {//there is no ')' after href 
       $(this).fadeIn(500); 
      }); 
     $(this).find('div > div').addClass(activeCls); 
    }); 
}); 

Démonstration de travail http://jsfiddle.net/tarabyte/F4EL9/. Ignorer le code supplémentaire pour émuler la réponse du serveur.

Answer 2

Pensez à faire quelque chose comme ceci:

<a onclick="load_url('/my-page.html');">My page</a> 

Et puis le jquery:

function load_url(url) 
{ 
    $("#target_div").load(url); 
}