Home/ Questions/Q 6785991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:11:35+00:00

I am developing a web application, where headers and footers for all pages are

  • 0

I am developing a web application, where headers and footers for all pages are the same. What I want to achieve, is to change only the part of the page between the header and the footer when a button in the header is clicked. For example, there are 3 buttons Home, Activities and Areas. If I click activities then header and footer of the page should remain the same and activities page should come in between header and footer. How can I do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I agree with rlemon. I think jQuery/AJAX is what you are looking for. For example:

    <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>

    In this simple implementation, I have just created 2 simple HTML pages, index.html will be used as a template. And activities.html, which contains the content I want to load dynamically.

    Therefore, if I click Activities, it should load activities.html into without reloading the entire page.

    You can download the jquery library from jquery.org

    I haven’t tested this, but it should work.

    Hope it helps 🙂

    • 0