Question

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

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>

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

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）使用包含语句

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

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

3 个答案: