我们如何只更改网页的内部部分？答案

【问题标题】：How can we change only inner part of a web page?我们如何只更改网页的内部部分？
【发布时间】：2019-11-15 08:25:34
【问题描述】：

我正在开发一个 Web 应用程序，其中所有页面的页眉和页脚都相同。我想要实现的是，当单击页眉中的按钮时，只更改页眉和页脚之间的页面部分。例如，有 3 个按钮 Home、Activity 和 Areas。如果我单击活动，则页面的页眉和页脚应保持不变，活动页面应位于页眉和页脚之间。我该怎么做？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我同意 rlemon。我认为 jQuery/AJAX 是您正在寻找的。例如：

<html>
    <head>
        <!-- Include Jquery here in a script tag -->
        <script type="text/javascript">
            $(document).ready(function(){
                 $("#activities").click(function(){
                     $("#body").load("activities.html");
                 });
            });
        </script>
    </head>
    <body>
        <div id="header">
            <a href="#" id="activities">Activities</a>
            <!-- this stays the same -->
        </div>
        <div id="body">

            <!-- All content will be loaded here dynamically -->

        </div>
        <div id="footer">
            <!-- this stays the same -->
        </div>
    </body>
</html>

在这个简单的实现中，我刚刚创建了 2 个简单的 HTML 页面，index.html 将用作模板。还有activity.html，里面包含了我要动态加载的内容。

因此，如果我点击活动，它应该加载activity.html而不重新加载整个页面。

你可以从jquery.org下载jquery库

我没有对此进行测试，但它应该可以工作。

希望对你有帮助:-)

【讨论】：

只想问一件事，所有页面都有不同的高度。我应该如何调整 div 主体的高度和宽度。高度：100% 宽度：100%，可以吗？
不需要，高度一般会根据内容自动调整
在 HTML 中，href 的 ID 是“#activities”，但应该是“activities”。
@Sthe 在 OP 的查询中，他有 3 个要加载的网页，但只是说您有 10 个以上...有没有办法将不同的页面合并到同一个脚本中？还是您只需要写出脚本 10 次以上？有点像“如果单击此按钮则单击此按钮，否则单击此按钮则单击此按钮，否则...”
您需要使其更具动态性。您可以为您的链接提供相同的类名，例如links。你不做$("#activities").click(function()...，而是做$(".links").click(function()。在每个链接上，您可以有一个与您要加载的页面名称相匹配的属性。喜欢这个<a href="#" class="links" page="mypage">...</a>。要加载它们，您可以执行以下操作：$("#body").load($(this).attr("page")+".html")。现在您可以使用相同的逻辑拥有 10 多个页面。

【解决方案2】：

页面交付时 - 合并页眉 + 正文 + 页脚。您可以将其视为一页。因此，如果您在标题中调用正文中的元素说“容器”，那么如果您将其包含在正文部分中，您将能够对其进行修改。

【讨论】：

【解决方案3】：

您使用的是 PHP 还是服务器端页面？您可以只包含页眉和页脚。 Jquery 真的很复杂，因为只想在页面上包含页眉和页脚。

【讨论】：

您使用的是 PHP、JSP 还是 ASP？
然后，您将通过在代码中插入以下内容将页眉包含在页脚中。文件名将是文件的位置，例如 header.jsp 或 footer.jsp
另外，请确保如果您在页眉或页脚文件中有任何链接、图像或视频，请将它们设为绝对链接，以便无论您将文件包含在哪个页面中，它们都可以正常工作。跨度>

【解决方案4】：

您正在寻找 AJAX（Asynchronous JavaScript and XML 的缩写）

在 jQuery 中你可以使用$.ajax

here 是关于如何使用 php 执行此操作的示例/教程。

【讨论】：

【解决方案5】：

您需要向服务器发出 AJAX 请求。服务器将回答 HTML 以在页眉和页脚之间“注入”。并且 AJAX 回调处理程序会将当前内容替换为新内容。

所有这些都是通过 jQuery 的快捷方式 load 函数为您完成的。见http://api.jquery.com/load/

【讨论】：

【解决方案6】：

创建一个包含内容的 div，并给它一个唯一的类或 id。然后在您的 jquery 代码中，在要用作导航的元素上绑定一个单击事件，并在该绑定中使用 $("#div").load("page.php") 或类似的东西将内容从另一个文件加载到div

【讨论】：

【解决方案7】：

或者，这可以通过 iframe 来完成。父页面（带有页眉和页脚）可以控制 iframe 并强制它导航。

权衡：

这可能会有点慢（加载整页）
这可能会更简单，具体取决于您的情况

【讨论】：