如何通過將頁面加載到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); 
}