0

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

4

3 回答 3

3

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

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

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

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

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

于 2012-07-30T00:35:24.180 回答
1

您可以使用 AJAX 做到这一点。jQuery 的一个例子是使用这个load函数：

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

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

于 2012-07-30T00:37:38.830 回答
1

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

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 包含、PHPrequire等）。然后，您将像在第一个选项中一样创建事件处理程序。

于 2012-07-30T00:50:10.827 回答