jquery将div内容替换为url/链接中的内容

我有一个包含多个div的页面，这些div用于使用jquery创建选项卡

我正在用php加载外部页面，比如带有分页的mysql数据等

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

e、 g

- 

因此，当我单击home1时，它将home div替换为home1.php 当我点击第1页时，它会将音乐div替换为音乐第1页等

我该怎么做？我一直在研究jquery click（）和replacewith（），但还没有找到解决方法

---

谢谢。

我想您可能需要jQuery的

.load（url）方法，请在此处查看API文档：

我想您可能需要jQuery的
.load（url）方法，请在此处查看API文档：

看起来您想使用jQuery ajax函数“load”

我想你的脸应该是这样的

onclick="loadParentWith(this)"

还有你应该去的地方

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

只是想让您知道，您可能需要考虑在第一次单击后禁用链接，这样您就不会多次尝试加载同一个div。如果有人使用你的页面时连接速度慢，他们可能会在第一个响应返回之前点击页面2-3次
 看起来您想使用jQuery ajax函数“load”

我想你的脸应该是这样的

onclick="loadParentWith(this)"

还有你应该去的地方

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

只是想让您知道，您可能需要考虑在第一次单击后禁用链接，这样您就不会多次尝试加载同一个div。如果有人使用你的页面时连接速度慢，他们可能会在第一个响应返回之前点击页面2-3次
 您的想法有一个[可能]问题：当home1.php或home2.php加载到“home”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>


家庭1
家庭2

如果不想覆盖“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);
}


家庭1
家庭2
函数showHomeOne（）{
if（$（'#home1Content'）。为（':hidden'）==false）返回；
//上面的行用作虚拟onClick disable
//如果已显示Home1内容
$（'#home1Content'）.html（''.toggle（）；
//“\”是因为我在单引号中使用单引号
//我可以通过在任意一个集合上使用双引号来避免这种情况
//Thel toggle（）将从display:none切换到display:“”并使
//跨度是可见的。
$（'#home1Content'）.load（'home1.html'）；
//加载home1.html页面时，它将自动覆盖gif
}
就是这样！对home2也一样。只有你的创造力和知识才是极限
您可以在jQuery中做什么。
假设没有额外的处理来显示页面，您可以使用
以下版本适用于所有页面：
将onClick更改为onClick='showPage（\'pageID-of-your-choosing\'）；'
功能显示页（pageID）{
//确保相应地更改隐藏的跨度ID：
if（$（'#'+pageID+'Content'）.is（':hidden'）==false）返回；
$（'#'+pageID+'Content'）.html（''；
$（'#'+pageID+'Content'）.load（pageID+'.html'）；
//对于最后一行，您可以将其替换为嵌套的，如果：
//var-myHtml；
//如果（pageID=='home1'）
//myHtml='home1.html'
//如果为else（pageID=='home2'）
//myHtml='home2.html'
//否则如果（pageID='home3'）
//myHtml='home3.html'
//else if（pageID=='music1'）
//myHtml='music1.html'
//else if（pageID='abcdefghig'）
//myHtml='the-page-this-case.html'；
//-->请注意上面最后一行末尾的；结束语句
//
//$（'#'+pageID+'Content'）.load（myHtml）；
}

祝你好运
 您的想法有一个[可能]问题：当home1.php或home2.php加载到“home”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>


家庭1
家庭2

如果不想覆盖“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);
}


家庭1
家庭2
函数showHomeOne（）{
if（$（'#home1Content'）。为（':hidden'）==false）返回；
//上面的行用作虚拟onClick disable
//如果已显示Home1内容
$（'#home1Content'）.html（''.toggle（）；
//“\”是因为我在单引号中使用单引号
//我可以通过在任意一个集合上使用双引号来避免这种情况
//Thel toggle（）将从display:none切换到display:“”并使
//跨度是可见的。
$（'#home1Content'）.load（'home1.html'）；
//加载home1.html页面时，它将自动覆盖gif
}
就是这样！对home2也一样。只有你的创造力和知识才是极限
您可以在jQuery中做什么。
假设没有额外的处理来显示页面，您可以使用
以下版本适用于所有页面：
将onClick更改为onClick='showPage（\'pageID-of-your-choosing\'）；'
功能显示页（pageID）{
//确保更改隐藏的跨度ID acc