如何更新单个div的html内容？

Question

我确信这是一个非常简单的问题，但我有多个页面，每个页面都有自己的“内容”，底部有页面导航。 在我开始编写脚本以生成几个不同的 html 文件之前，这些文件都有头部、主体和导航页脚代码......我怎么可能只有一个导航页脚实例并且链接只更新“内容”中的内容分区？

Answer 1

通过JavaScript更新元素内容的非常基本的示例：

<div id="content"></div>

<script>
    document.getElementById('content').innerHTML='<b>oh hai</b>';
</script>​​​​​​​​​​​​​

要在有人单击链接时执行此操作，您可以将一个函数附加到该链接的onclick处理程序上，该函数会进行更新，然后返回false，因此该链接不会执行通常的导航。

如果您不想将所有内容加载到单个文件中，则可以使用AJAX动态检索内容。 您可能希望使用类似jQuery的库/框架来简化AJAX交互的编码。

Answer 2

您可以使用AJAX进行此操作。 jQuery的一个示例使用load函数：

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

这将获取给定的URL，并将其内容加载到与选择器匹配的元素中。

Answer 3

这可以通过几种不同的方式解决。 您将需要一次加载所有可能的内容（加载后易于访问内容，但初始加载速度很慢），或者您可以根据用户的要求异步请求内容。

1）将所有内容硬编码到一页

这样，您可以在页面上隐藏一些内容块：

<div class="content-blocks">
  <div class="content" id="content1">...</div>
  <div class="content" id="content2">...</div>
  ...
</div>

然后，每个链接都将具有一个事件处理程序，以将适当的内容加载到您的主要content元素中。

document.getElementById('content1-link').onclick = function() {
    document.getElementById('content-box').innerHTML = document.getElementById('content1').innerHTML
}

2）提出AJAX内容请求

为此，您的各种内容块将存储在外部文件中，例如“ content1.html”，“ content2.html”等。我强烈建议使用支持AJAX的javascript库对此方法进行处理，因为它们会处理差异浏览器如何处理异步请求。 一些工具（例如jQuery）还提供了方便的功能来执行以下任务：

$('#content1-link').on('click',function(){
  $('#content-box').load('/path/to/content1.html');
});

3）使用include语句

此方法可以轻松实现第一个解决方案（不依赖异步请求），但是可以像第二个解决方案一样将您的内容保存在单独的文件中。 基本上，您可以利用服务器/语言支持的任何类型的包含（例如SSI包含，PHP require等）。 然后，您将像第一个选项一样创建事件处理程序。