我們如何才能改變一個網頁的內部？

我正在開發一個Web應用程序，所有頁面的頁眉和頁腳都是相同的。我想要實現的是，當單擊標題中的按鈕時，只更改頁眉和頁腳之間的頁面部分。例如，主頁，活動和區域有3個按鈕。如果我點擊活動，頁面的頁眉和頁腳應該保持不變，活動頁面應該位於頁眉和頁腳之間。我怎樣才能做到這一點？我們如何才能改變一個網頁的內部？

來源

2011-11-10 Piscean

我同意rlemon。我認爲你正在尋找jQuery/AJAX。例如：

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

在這個簡單的實現中，我剛創建了2個簡單的HTML頁面，index.html將被用作模板。和activities.html，其中包含我想要動態加載的內容。

因此，如果我點擊活動，它應該加載到沒有重新加載整個頁面的activities.html。

您可以從jquery.org

我沒有測試此下載jQuery庫，但它應該工作。

希望它有幫助:-)

來源

2011-11-10 13:00:37 Sthe

只想問一個問題，即所有頁面都會有不同的高度。我該如何調整div body的高度和寬度。身高：100％，寬度：100％，可以嗎？ – Piscean

不應該是必須的，高度通常會自動調整爲內容 – Flo

在HTML中，href的ID是「#activities」，但應該是「activities」。 – showdev

當頁面交付時 - Header + Body + Footer被合併。你可以把它當作一個頁面。所以如果你的標題中稱爲「容器」中的一個元素，然後提供你將它包含在主體部分中，你將能夠修改它。

來源

2011-11-10 12:39:50 diagonalbatman

您是使用PHP還是服務器端頁面？你可以只包含頁眉和頁腳。 Jquery真的很複雜，只是想在頁面上添加頁眉和頁腳。

來源

2011-11-10 12:40:26

您正在使用PHP，JSP或ASP？ –

我正在使用JSP ... – Piscean

然後，通過在代碼中插入以下代碼，您可以在頁腳中包含頁眉。 <％@ include file =「filename」％> 文件名將是文件的位置，如header.jsp或footer.jsp –

您正在尋找在jQuery的AJAX（縮寫異步JavaScript和XML）

可以使用$.ajax

here是如何用PHP做這樣的例子/教程。

來源

2011-11-10 12:40:37 rlemon

您需要向服務器發出AJAX請求。服務器將回答HTML以在頁眉和頁腳之間「插入」。而AJAX回調hendler會用新的替換當前的內容。

所有這些都是由jQuery的快捷方式load函數完成的。請參閱http://api.jquery.com/load/

來源

2011-11-10 12:42:33

創建一個包含內容的div，併爲其提供唯一的類或ID。然後在你的jQuery代碼中綁定一個你想用作導航的元素上的點擊事件，並在該綁定中使用$（「＃div」）.load（「page.php」）或類似的東西從另一個文件加載內容into the div

來源

2011-11-10 12:42:55 Flo

我們如何才能改變一個網頁的內部？

回答

相關問題