Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
editAsk a Question
Welcome To Ask or Share your Answers For Others

Categories

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

in Technique[技术] by (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
352 views
Welcome To Ask or Share your Answers For Others

1 Answer

by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

548k questions

547k answers

4 comments

86.3k users

Most popular tags

Theme made by Momin Raza, Modified by Ostack
Powered by Question2Answer
...