Question

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

Answer 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将用作模板。和activities.html，其中包含我想要动态加载的内容。

因此，如果单击“活动”，则应将activities.html加载到其中，而不重新加载整个页面。

您可以从jquery.org

下载jquery库

我没有对此进行过测试，但它应该有效。

希望它有所帮助： - ）

Answer 2

页面传递时 - Header + Body + Footer合并。您可以将其视为一个页面。因此，如果您在标题中称为“容器”中的元素，则说明“容器”，然后将其包含在正文部分中，您就可以对其进行修改。

Answer 3

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

Answer 4

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

在jQuery中，您可以使用$.ajax

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

Answer 5

您需要向服务器发出AJAX请求。服务器将使用HTML回答＆＃34;注入＆＃34;页眉和页脚之间。并且AJAX回调hendler将用新的内容替换当前内容。

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

Answer 6

创建一个包含内容的div，并为其指定一个唯一的类或id。然后在你的jquery代码中绑定你想要用作导航的元素上的click事件，并在该bind中使用$（“＃div”）。load（“page.php”）或类似的东西将其他文件中的内容加载到div

Answer 7

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

权衡：

这可能会慢一些（加载整页）
根据您的情况，这可能会更简单

我们怎样才能只改变网页的内部部分？

7 个答案: