Question

我有一个我正在处理的小网站，并选择将导航栏（我使用Bootstrap）分隔到外部文件中，因此我不必重新编写它对于每个使用它的文件，每次我对它进行更改。这非常有效，因为我使用以下代码导入它：

<!-- Loads external files -->
<script>
$(function(){
$("#navbarContent").load("/navbar.html");
});
</script>

在我的<body>中，我有以下代码，我需要导航栏：

<div id="navbarContent"></div>

问题是，在我的索引上，我在导航栏中有一个链接，点击时可以平滑地移动到索引页面上的锚点位置。我想要的是，当从索引（工作）以外的其他页面加载时，能够立即移动到锚点，除了从索引本身平滑锚定。

我建议的解决方案是简单地添加第二个导入，根据每个页面的不同。换句话说，指向锚点的链接会有不同的href内容，因此我会将它们存储在单独的文件中，但由于某些原因它无法正常工作：

即：

在index.html上，使用以下代码：

<script>
$(function(){
$("#navbarContent").load("/navbar.html").load("/indexcontact.html");
});
</script>

除了发生的情况之外，整个事情都被indexcontact.html取代而不是添加到navbar.html。我已经用愚蠢的事情进行了测试，无论我在这两个文件中有什么，这似乎都会发生。

那么，有没有办法合并两个jQuery加载，所以我可以将两个导入简单地合并到一个巨大的字符串中？

Answer 1

一种方法是使用$.when进行两次AJAX调用，并在将输出设置为#navbarContent之前连接输出。

var d1 = $.ajax('/navbar.html');
var d2 = $.ajax('/indexcontact.html');

$.when( d1, d2 ).done(function ( v1, v2 ) {
    $("#navbarContent").html([v1[0], v2[0]].join());
});

要了解有关$.when的更多信息，请参阅jQuery文档here。

将HTML导入另一个HTML导入

1 个答案: