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

祝你好运！