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

前端未结

关注

 7  1094

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 an

相关标签:

7条回答

野性不改

2020-12-06 08:40
Alternatively, this can be done with iframes. The parent page (with header and footer) can control the iframe and force it to navigate.

Tradeoffs:
- This may be a bit slower (loading a full page)
- this may be simpler depending on your case
0 讨论(0)
发布评论:

提交评论
- 加载中...
半阙折子戏

2020-12-06 08:43

Are you using PHP or Server-Side Pages? You could just have headers and footers as includes. Jquery is really complex for just wanting to include heads and footers on your page.

0 讨论(0)
发布评论:

提交评论
- 加载中...
耶瑟儿～

2020-12-06 08:53

When the page is delivered - Header + Body + Footer is merged. You are able to treat this as one page. So if you in your header called an element in your body say "Container" then providing you include it in the body section you will be able to modify it.

0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2020-12-06 08:56

You are looking for AJAX (acronym for Asynchronous JavaScript and XML)

in jQuery you can use $.ajax

here is an example/tutorial on how to do this with php.

0 讨论(0)
发布评论:

提交评论
- 加载中...
小蘑菇

2020-12-06 09:01

create a div that contains the content, and give it a unique class or an id. Then in your jquery code bind a click event on the elements you want to use as navigation and in that bind use $("#div").load("page.php") or something like that to load content from another file into the div

0 讨论(0)
发布评论:

提交评论
- 加载中...

独厮守ぢ

2020-12-06 09:05

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 讨论(0)

1 2 下一页