我们怎么能只改变网页的内部部分呢?

How can we change only inner part of a web page?

本文关键字：内部 怎么能 改变 网页 我们      更新时间：2023-09-26

我正在开发一个web应用程序，所有页面的页眉和页脚都是相同的。我想要实现的是，当单击标题中的按钮时，仅更改页眉和页脚之间的部分页面。例如，有3个按钮Home, Activities和Areas。如果我点击活动，那么页眉和页脚应该保持不变，活动页应该在页眉和页脚之间。我该怎么做呢?

我同意relemon的观点。我认为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将被用作模板。activities.html，其中包含我想要动态加载的内容。

因此，如果我点击Activities，它应该加载Activities .html到，而不需要重新加载整个页面。

你可以从jquery.org下载jquery库

我还没有测试过，但是应该可以。

希望有帮助:-)

页面交付时- Header + Body + Footer合并。您可以将其视为一页。因此，如果你在页眉中称为body中的元素比如"Container"那么如果你将其包含在body部分中你就可以修改它

您是使用PHP还是服务器端页面?你可以只把页眉和页脚作为include。如果只是想在页面中包含页眉和页脚，那么Jquery真的很复杂。

您正在寻找AJAX(异步JavaScript和XML的首字母缩写)

jQuery中的

可以使用$.ajax

这里有一个关于如何在php中做到这一点的示例/教程

您需要向服务器发出一个AJAX请求。服务器将在页眉和页脚之间"注入"HTML作为回应。AJAX回调处理程序将用新内容替换当前内容。

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

创建一个包含内容的div，并给它一个唯一的类或id。然后在jquery代码中为导航元素绑定一个点击事件在绑定中使用$("#div")。load("page。php")之类的东西将其他文件中的内容加载到div

或者，这可以用iframe来完成。父页(带有页眉和页脚)可以控制iframe并强制它导航。

权衡:

  • 这可能有点慢(加载整个页面)
  • 这可能更简单，取决于你的情况
相关文章：