如何使用Javascript / Jquery / HTML包含不同的HTML页面？

Question

我知道iframe可以实现这一点，但我想知道在没有iframe的情况下如何做到这一点。我有4页。

的index.html 1.HTML 2.HTML 3.html

index.html有3个链接。如果我点击index.html页面上的链接1，则加载1.html中的所有html内容。如果我在链接2上clikc，则加载2.html。

如何使用Jquery / Javascript / HTML实现此目的？ （没有服务器端）

Answer 1

使用jQuery，您可以使用get()或load()函数来获取页面的内容。如果您使用get，则可以append将其添加到当前页面中的元素，或使用html函数覆盖该元素中的现有内容。

使用load更简单：

$("#yourElementId").load("1.html");

Answer 2

正如其他人建议的那样，.load()可能是你的朋友。此外，请注意您可以加载所请求页面的特定部分。此示例来自the API doc for load()

$('#result').load('ajax/test.html #container');

从container的结果中获取ID为ajax/test.html的元素并将其加载到。{1}}中 标识为result的本地元素。这种技术可能更符合您的需求，特别是如果您尝试将多个页面组合成一个页面。

Answer 3

您也可以使用jQuery Ajax方法轻松完成此操作，它比加载方法更灵活（例如，您可以指定您不希望获得页面的缓存版本）。< / p>

<div id="results"></div>

$.ajax({
  url: "1.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});