如何通过将页面加载到div来创建动态导航系统？

Question

我想创建一个导航系统，其中有一组链接，点击时会将外部页面加载到div中。这是我到目前为止，但它不工作：

<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

你的c中有几个错误ode：

1. .load(this.href*)*, function() {...);应该是.load(this.href, function() {。你想指定一个完整的回调。不只是声明一个函数表达式，对吧？
2. this div div那是什么？你需要$(this).find('div > div')。

总结。

$(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); 
    }); 
}); 

工作演示http://jsfiddle.net/tarabyte/F4EL9/。忽略其他代码来模拟服务器响应。

Answer 2

考虑做这样的事情：

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

然后jQuery的：

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