如何更新單個div的html內容？

Question

我確信這是一個非常簡單的問題，但我有多個頁面，每個頁面都有自己的“內容”，底部有頁面導航。 在我開始編寫腳本以生成幾個不同的 html 文件之前，這些文件都有頭部、主體和導航頁腳代碼......我怎么可能只有一個導航頁腳實例並且鏈接只更新“內容”中的內容分區？

Answer 1

通過JavaScript更新元素內容的非常基本的示例：

<div id="content"></div>

<script>
    document.getElementById('content').innerHTML='<b>oh hai</b>';
</script>​​​​​​​​​​​​​

要在有人單擊鏈接時執行此操作，您可以將一個函數附加到該鏈接的onclick處理程序上，該函數會進行更新，然后返回false，因此該鏈接不會執行通常的導航。

如果您不想將所有內容加載到單個文件中，則可以使用AJAX動態檢索內容。 您可能希望使用類似jQuery的庫/框架來簡化AJAX交互的編碼。

Answer 2

您可以使用AJAX進行此操作。 jQuery的一個示例使用load函數：

http://api.jquery.com/load/

這將獲取給定的URL，並將其內容加載到與選擇器匹配的元素中。

Answer 3

這可以通過幾種不同的方式解決。 您將需要一次加載所有可能的內容（加載后易於訪問內容，但初始加載速度很慢），或者您可以根據用戶的要求異步請求內容。

1）將所有內容硬編碼到一頁

這樣，您可以在頁面上隱藏一些內容塊：

<div class="content-blocks">
  <div class="content" id="content1">...</div>
  <div class="content" id="content2">...</div>
  ...
</div>

然后，每個鏈接都將具有一個事件處理程序，以將適當的內容加載到您的主要content元素中。

document.getElementById('content1-link').onclick = function() {
    document.getElementById('content-box').innerHTML = document.getElementById('content1').innerHTML
}

2）提出AJAX內容請求

為此，您的各種內容塊將存儲在外部文件中，例如“ content1.html”，“ content2.html”等。我強烈建議使用支持AJAX的javascript庫對此方法進行處理，因為它們會處理差異瀏覽器如何處理異步請求。 一些工具（例如jQuery）還提供了方便的功能來執行以下任務：

$('#content1-link').on('click',function(){
  $('#content-box').load('/path/to/content1.html');
});

3）使用include語句

此方法可以輕松實現第一個解決方案（不依賴異步請求），但是可以像第二個解決方案一樣將您的內容保存在單獨的文件中。 基本上，您可以利用服務器/語言支持的任何類型的包含（例如SSI包含，PHP require等）。 然后，您將像第一個選項一樣創建事件處理程序。