Javascript AJAX：如何使加载的页面显示在调用它的页面下方_Javascript_Jquery_Html_Css_Ajax

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

javascript jquery html css ajax

Javascript AJAX：如何使加载的页面显示在调用它的页面下方,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我的主页的代码： <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:100p

我的主页的代码：

<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
{
宽度：100%；
高度：100px；
背景色：rgba（189123124,1.00）；
位置：绝对位置；
底部：0；
/*把这个div放在最上面*/
z指数：9000；
}
.集装箱
{
/*使要加载的页面显示在div下面*/
z指数：200；
}
$（文档）.ready（函数（）
{
$（窗口）。在（“单击”，函数（）上）
{
$（“div.container”）.load（“Page1.html”）；
});
});

正如您在上面看到的，我已经尝试使底部的红色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>


正文，html
{
身高：100%；
}
div
{
宽度：100%；
身高：100%；
背景色：rgba（171147136,1.00）；
}
第一页

然而，当Page1.html被加载时，它完全位于红色div条的顶部，div条消失。看来Z指数是没用的。我该如何解决这个问题

您可以在此处看到实际页面：

尝试类似的方法

索引


.页脚
{
/*使要加载的页面显示在div下面*/
z指数：200；
宽度：100%；
高度：100px；
背景色：rgba（189123124,1.00）；
位置：绝对位置；
底部：0；
/*把这个div放在最上面*/
z指数：9000；
}
正文，html
{
身高：100%；
}
$（文档）.ready（函数（）
{
$（窗口）。在（“单击”，函数（）上）
{
$（“div.holder”）.load（“Page1.html”）；
});
});

第1页


.数据
{
宽度：100%；
身高：100%；
背景色：rgba（171147136,1.00）；
}
第一页

我已经从page1中删除了head和body标记，因为您的HTMl无效。你们不能在你们的身体里有头标签，也不能在身体里有身体标签。

如果将部分视图/页面附加到现有页面，则不应包含标题或布局。

是要将其放在下面还是后面？Z索引用于重叠。唯一的问题是，上面的代码不会使加载的页面（Page1.html）填满浏览器窗口，所以我在CSS部分中取出“body，html”规则，并显式设置。容器高度：100%。再次感谢您的帮助！：-）

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

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


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