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

Pis*_*ean 4 html javascript jquery html5

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

Sth*_*the 14

我同意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>
Run Code Online (Sandbox Code Playgroud)

在这个简单的实现中,我刚刚创建了2个简单的HTML页面,index.html将用作模板.和activities.html,其中包含我想要动态加载的内容.

因此,如果我单击"活动",它应该在不重新加载整个页面的情况下加载activities.html.

您可以从jquery.org下载jquery库

我没有测试过这个,但它应该可以工作.

希望能帮助到你 :-)