Javascript 使用菜单链接将HTML文件加载到DIV中

对于专家们来说，我知道这是一个非常简单的问题，我对此深信不疑。我是个新手。我正在创建菜单链接，将一个HTML文件加载到一个DIV中。但是它一直加载到另一个窗口中。我正在使用以下代码：

<a href="ifitting" 
onclick="document.
         getElementById('iftext').
         innerHTML = '<p>MYCONTENT</p>';"
>
LINKID
</a>

“iFiting”是位于“Navigate”分区id中的菜单链接

我需要它加载到“iftex”分区id中

以下是指向测试页面的链接：

---

如果能提供任何反馈，我将不胜感激。我已经坚持了两天，没有找到一个有效的答案（我知道如何克服；）

只是一个猜测，但我认为您需要在您的onclick事件结束时添加return false

---

不过，我还没有测试过它！

只是一个猜测，但我认为您需要在onclick事件的末尾添加return false

但是还没有测试过！

可能有用：

$('#someElement').load("someHTML.html");

也许有用：

$('#someElement').load("someHTML.html");

---

你有两个问题：

首先，您的

href

不应该将您带到另一页的“iFiting”，而是带到“#iFiting”，例如，它将是同一页中的书签。 然后，在js innerHTML中不应该有换行符

这项工作：

<a href="#ifitting" onclick="document.getElementById('iftext').innerHTML = '&lt;p&gt;Client Consultation:&lt;br&gt;Process begins with discussing our customers’ personal tastes and their needs with the designer. We assess the function of the garment and advise on suitable cloths from our library of patterns, linings and trims.&lt;/p&gt;';">Initial Fitting</a>

---

请注意插入innerHTML中的

href=“#ifiting”

和

。

您有两个问题：

首先，您的

href

不应该将您带到另一页的“iFiting”，而是带到“#iFiting”，例如，它将是同一页中的书签。 然后，在js innerHTML中不应该有换行符

这项工作：

<a href="#ifitting" onclick="document.getElementById('iftext').innerHTML = '&lt;p&gt;Client Consultation:&lt;br&gt;Process begins with discussing our customers’ personal tastes and their needs with the designer. We assess the function of the garment and advise on suitable cloths from our library of patterns, linings and trims.&lt;/p&gt;';">Initial Fitting</a>

请注意插入innerHTML中的

href=“#ifiting”

和

。

这在中有效

这基本上是Damon的答案，在函数中正确实现 而不是在onclick中内联

如果您创建了一个onclick函数，那么所有链接都可以使用该函数 查找所单击链接的id，然后在查找表或中查找文本 用jquery$.load加载它。这里没有这样做。这只解决了发布的简单案例

HTML

点击链接后，内容将显示在下面：

JAVASCRIPT

// Note: You'll need to load jQuery for this to work
var iftextHTML = '<p>Client Consultation: Process begins with discussing our customers’ personal tastes and their needs with the designer. We assess the function of the garment and advise on suitable cloths from our library of patterns, linings and other crap </p>';

$(function(){
    $('#iflink').on('click',function(){
        $('#iftext').html(iftextHTML);
        return false; // stop link from taking you off the page
    });
});

//注意：您需要加载jQuery才能工作
var iftextHTML='客户咨询：流程从讨论客户开始™ 设计师的个人品味和需求。我们评估服装的功能，并从我们的图案、衬里和其他垃圾库中建议合适的服装
；
$（函数（）{
$（'iflink'）。在（'click'，function（）上{
$（'#iftext'）.html（iftextHTML）；
return false；//停止链接使您离开页面
});
});

这在中起作用

这基本上是Damon的答案，在函数中正确实现 而不是在onclick中内联

如果您创建了一个onclick函数，那么所有链接都可以使用该函数 查找所单击链接的id，然后在查找表或中查找文本 用jquery$.load加载它。这里没有这样做。这只解决了发布的简单案例

HTML

点击链接后，内容将显示在下面：

JAVASCRIPT

// Note: You'll need to load jQuery for this to work
var iftextHTML = '<p>Client Consultation: Process begins with discussing our customers’ personal tastes and their needs with the designer. We assess the function of the garment and advise on suitable cloths from our library of patterns, linings and other crap </p>';

$(function(){
    $('#iflink').on('click',function(){
        $('#iftext').html(iftextHTML);
        return false; // stop link from taking you off the page
    });
});

//注意：您需要加载jQuery才能工作
var iftextHTML='客户咨询：流程从讨论客户开始™ 设计师的个人品味和需求。我们评估服装的功能，并从我们的图案、衬里和其他垃圾库中建议合适的服装
；
$（函数（）{
$（'iflink'）。在（'click'，function（）上{
$（'#iftext'）.html（iftextHTML）；
return false；//停止链接使您离开页面
});
});

谢谢Sara，不知道该放在哪里，你可以详细说明，我会测试吗？谢谢Sara，不知道该放在哪里，你可以详细说明，我会测试吗？谢谢Damon，刚刚测试仍然不行：（谢谢Damon，刚刚测试仍然不行：（现在唯一的事情是，当我添加其余链接时，第二个链接没有填充。我需要告诉它删除第一个href并加载较新的一个吗？ugh您再次在“innerHTML”中添加了一行新行。使用HTML新行“
“相反。

是的，我刚刚添加了所有其他链接和代码。你能告诉我我缺少什么吗？我在每个链接之后都使用了
，但其他链接没有加载到div中：（不，您误解了我的意思：

必须位于文本标题后面的onclick属性中。请参阅我的最后一条评论，在Construction和Once之间：您不能在“Measurements&Construction:”之后换行。）就像你现在看到的一样。我说的是你想在div中添加的文本。我已经将
放在你建议的位置。1）我希望每个链接都位于“导航”div中的单独一行。2）当我单击其他链接时，它们不会替换“iftex”div的内容。请参阅链接（http://）现在唯一的问题是，当我添加其余链接时，第二个链接没有填充。我需要告诉它删除第一个href并加载较新的一个吗？您再次在“innerHTML”中添加了一行新行。请使用HTML新行“
”相反。
是的，我刚刚添加了所有其他链接和代码。你能告诉我我缺少什么吗？我在每个链接之后都使用了
，但其他链接和代码没有加载到div中：（不，您误解了我的意思：

必须位于文本标题后面的onclick属性中。请参阅我的最后一条评论，在Construction和Once之间：您不能在“Measurements&Construction:”之后换行。）就像你现在看到的一样。我说的是你想在div中添加的文本。我已经将
放在你建议的位置。1）我希望每个链接都位于“导航”div中的单独一行。2）当我单击其他链接时，它们不会替换“iftex”div的内容。请参阅链接（http://）谢谢你，保罗！正在努力解决这个问题