Question

我有一个包含多个div的页面，这些div用于使用jquery制作标签。

我正在使用带有分页等的mysql数据加载外部页面。

我想要的是当用户点击每个div中的链接时，它会用该网址中的内容替换div。

e.g。

<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时，它会用home1.php替换home div 当我点击第1页时，它会将音乐div替换为音乐页面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

您的想法存在[可能]问题：当home1.php或home2.php加载到“home”div时，该新内容将覆盖这两个链接。那也是“音乐”div。那是你真正想要的吗？

事实上，正如你所拥有的那样，当客户端点击Home1或Home2时，浏览器会将这些页面加载为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>

如果您不想覆盖“home”中的链接，您可能需要在两个链接的正下方添加home1和home2的新div。例如。

编辑（根据请求） - 禁用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);
}

祝你好运！

Answer 3

我想你可能想要jQuery的.load(url);方法，请看这里的API文档：

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

Answer 4

看起来你想使用jQuery ajax函数'load' http://api.jquery.com/load/

我认为你的onclick应该是这样的

onclick="loadParentWith(this)"

以及你应该拥有的地方

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

只是为了让您知道您可能想要考虑在第一次单击后可能禁用链接，这样您就不会尝试多次加载相同的div。如果连接速度较慢的人使用您的页面，他们可能会在第一个响应返回之前点击2-3次。

jquery用来自url / link的内容替换div内容

4 个答案: