jquery用URL /鏈接替換div內容與內容

Question

我有一個多頁面的頁面，這些頁面用於製作jquery頁面。

我加載外部網頁與像分頁MySQL數據PHP等

當用戶點擊一個鏈接中的每個div的它取代了DIV與該URL的內容我想是。

例如

<div id="home"> 
<a href="home1.php">Home1</a> 
<a href="home2.php">Home2</a> 
</div> 

<div id="music"> 
<a href="track.php?tid=1">Track 1</a> - <a href="artist.php?aid=3">Artist</a> 
<a href="music.php">First</a> <a href="music.php?page=1">Page 1</a> <a href="music.php?page=2">Page 2</a> 
</div> 

所以當我點擊和home1它取代了家庭的div與home1.php 當我點擊第1頁它取代音樂頁面1等音樂格

我如何做到這一點？我一直在尋找jquery click（）和replacewith（），但還沒有解決如何做到這一點。

謝謝。

Answer 1

附加一個事件你要這個功能活躍的鏈接 - 你可以做到這一點通過添加一類的鏈接 - 即

<div id="home"> 
<a class="livelink" href="home1.php">Home1</a> 
<a class="livelink" href="home2.php">Home2</a> 
</div> 

<div id="music"> 
<a class="livelink" href="track.php?tid=1">Track 1</a> - <a class="livelink" href="artist.php?aid=3">Artist</a> 
<a class="livelink" href="music.php">First</a> <a class="livelink" href="music.php?page=1">Page 1</a> <a class='"livelink" href="music.php?page=2">Page 2</a> 
</div> 

然後是click事件綁定到所有這些錨：

$('.livelink').click(function(event) { 
    $(this).parent('div').load($(this).attr('href')); //load the data 
    event.preventDefault(); // prevent the browser from following the link 
}); 

或通過激活各個環節

$('div a').click(function(event) { 
    $(this).parent('div').load($(this).attr('href')); 
    event.preventDefault; // prevent the browser from following the link 
}); 

我想您更好地使用第一種方法，你有更多的控制

Answer 2

我想你也許會想jQuery的.load(url);方法，看看在API文檔在這裏：

http://api.jquery.com/load/

Answer 3

看起來你想使用jQuery的AJAX功能「負荷」 http://api.jquery.com/load/

我想你的onclick應該是這樣的

onclick="loadParentWith(this)" 

和地方你應該有

function loadParentWith(link){ 
    $(link).parent('div').load($(link).attr('href')); 
} 

只是爲了讓你知道你可能要考慮可能禁用首次點擊後，鏈接，讓你不要嘗試同一div多次加載。如果連接速度慢的人使用你的頁面，他們可能會在第一個響應返回之前點擊2至3次。

Answer 4

有一個[可能]您的想法：當任home1.php或home2.php被加載到「家」的div，新內容將覆蓋這兩個環節。這也是「音樂」分區。這是你真正想要的嗎？

實際上的問題，因爲你擁有它，當HOME1或家庭2客戶端點擊，瀏覽器會因爲你有他們的HREF錨加載這些頁面。

你可能想嘗試這條線的東西：

<div "home"> 
<span style='display:block; ' onClick="$('#home').load('home1.php'); ">Home1</span> 
<span style='display:block; ' onClick="$('#home').load('home2.php'); ">Home2</span> 
</div> 

如果您不希望覆蓋的「家」中的鏈接，你可能要添加新的div的和home1和HOME2右以下兩個鏈接例如。

EDIT（每個請求） - 禁用的onClick並添加加載GIF

<div "home"> 
<span id='home1' style='display:block; ' onClick='showHomeOne(); ' >Home1</span> 
<span id='home2' style='display:block; ' onClick='showHomeTwo(); ' >Home2</span> 
<span id='home1Content' style='margin-top:4px; display:none; ' ></span> 
<span id='home2Content' style='margin-top:4px; display:none; ' ></span> 
</div> 
<!-- 
in a more advanced mode, you could do showHome('1') and showHome('2') 
---> 

function showHomeOne() { 
    if ($('#home1Content').is(':hidden') == false) return; 
    // the above line works as a virtual onClick disable 
    // in case the home1Content is already being displayed 

    $('#home1Content').html('<img src=\'your-loading-gif.gif\' />').toggle(); 
    // the \' is because I am using single quotes within single-quotes 
    // I could avoid this by using the double quotes on either of the sets 
    // Thel toggle() will toggle from display:none to display:'' and make 
    // the span visible. 

    $('#home1Content').load('home1.html'); 
    // when the page home1.html is load, it automatically will overwrite the gif 
} 

This is it! Do the same for home2. Only your creativity and knowledge is the limit 
to what you can do in jQuery. 

Assumed that there are no extra processing to display the pages, you could use the 
version below for ALL the pages: 

Change the onClick to onCLick='showPage(\'pageID-of-your-choosing\'); ' 

function showPage(pageID) { 
    //make sure to change the hidden span IDs accordingly: 

    if ($('#'+pageID+'Content').is(':hidden') == false) return; 

    $('#'+pageID+'Content').html('<img src=\'your-loading-gif.gif\' />'); 

    $('#'+pageID+'Content').load(pageID+'.html'); 

    // for the last line you could replace it with a nested if: 
    // var myHtml; 
    // if (pageID == 'home1') 
    //  myHtml='home1.html' 
    // else if (pageID == 'home2') 
    //  myHtml='home2.html' 
    // else if (pageID == 'home3') 
    //  myHtml='home3.html' 
    // else if (pageID == 'music1') 
    //  myHtml='music1.html' 
    // else if (pageID == 'abcdefghig') 
    //  myHtml='the-page-that-would-be-called-in-this-case.html'; 
    // --> notice the ; at the end of the last line above: end of statement 
    // 
    // $('#'+pageID+'Content').load(myHtml); 
} 

祝你好運！