AJAX:如何使加载的页面显示在调用它的页面的下面

AJAX : How to make loaded page appear below the page that calls it

本文关键字：调用 显示 加载 AJAX 何使      更新时间：2023-09-26

主页代码:

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        div
        {
            width:100%;
            height:100px;
            background-color:rgba(189,123,124,1.00);
            position:absolute;
            bottom:0;
            /* make this div TOPMOST */
            z-index:9000;
        }
        .container
        {
            /* make the page that will be loaded appear below the div */
            z-index:200;
        }
    </style>
    </head>
    <body>
        <div>
            <div class="container">
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $(window).on("click", function()
                {
                    $("div.container").load("Page1.html");
                });
            });
        </script>
    </body>

正如你在上面看到的，我试图让底部的红色div栏出现在最上面，这样当用户点击浏览器窗口加载Page1.html时，底部的红色栏仍然会在最上面。

现在，我的Page1.html代码: 
<head>
<style type="text/css">
    body, html
    {
        height:100%;
    }
    div
    {
        width:100%;
        height:100%;
        background-color:rgba(171,147,136,1.00);
    }
</style>
</head>
<body>
    <div>Page One</div>
</body>

然而，当Page1.html被加载时，它完全出现在红色div栏的顶部，并且div栏消失了。似乎z指数是无用的。我该如何解决这个问题?

您可以在这里看到实际的页面:http://oneniceday.com/SR-1/Test2.html

试试这样

指数

 <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .footer
        {
            /* make the page that will be loaded appear below the div */
            z-index:200;
             width:100%;
            height:100px;
            background-color:rgba(189,123,124,1.00);
            position:absolute;
            bottom:0;
            /* make this div TOPMOST */
            z-index:9000;
        }
        body, html
    {
        height:100%;
    }
    </style>
    </head>
    <body>

        <div class="holder"></div>
     <div class="footer">
            </div>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $(window).on("click", function()
                {
                    $("div.holder").load("Page1.html");
                });
            });
        </script>
    </body>
Page1 

<style type="text/css">
    .data
    {
        width:100%;
        height:100%;
        background-color:rgba(171,147,136,1.00);
    }
</style>

    <div class="data">Page One</div>

我已经从page1中删除了头部和正文标签，因为你有无效的HTMl。你不能在body中使用head标签，也不能在body中使用body标签。部分视图/页面，如果您将其附加到现有页面，则不应包含标题或布局。

相关文章：