Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
361 views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...