AJAX：如何使加載的頁面出現在調用它

代碼爲我的主網頁的頁面下方：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: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>

正如你可以在上面看到，我試圖讓在底部出現紅色格酒吧最上面，所以當用戶點擊瀏覽器窗口時加載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欄消失。看起來像Z-Index是無用的。我該如何解決？

你可以看到實際的頁面在這裏：http://oneniceday.com/SR-1/Test2.html

來源

2015-10-14 Xeon

是你想要它在下面或你想要它？ Z索引用於重疊。 – Minato

嘗試是這樣的

指數

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

第1頁

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


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

我從第1頁去除頭部和身體的標籤，因爲你的HTMl無效。你的身體裏不能有頭標籤，或身體內沒有標籤。部分視圖/頁面，如果將其附加到現有頁面，則不應包含標題或佈局。

來源

2015-10-14 06:38:54 Robert

Tks！有效！ http://oneniceday.com/SR-1/Test2.html – Xeon

唯一的問題是，上面的代碼並沒有使加載的頁面（Page1.html）填充瀏覽器窗口，所以我拿出了「body，html」規則在CSS部分並明確地將.container設置爲高度：100％。再次請求您的幫助！ :-) – Xeon

不客氣:) – Robert

AJAX：如何使加載的頁面出現在調用它

回答

相關問題