如何使用 Twitter Bootstrap 製作單一靜態 HTML 網頁，該網頁可以根據使用者點擊顯示不同的部分

Question

我正在製作簡單的網站來託管我的個人資料。我使用 Twitter Bootstrap 進行佈局。

我的網站有 4 個部分（A、B、C、D）。我正在使用四個不同的 html 檔案（即A.html,B.html,C.html,D.html) 儲存相應章節的文字。我必須在所有四個 html 文件中使用相同的標題文字（用於導航）。

有什麼方法可以讓我只使用一個 html 文件，即索引.html並在使用者點擊導覽列時顯示對應的部分？

我只能使用靜態網頁。我使用的網頁寄存服務僅允許靜態頁面，無需 PHP 等。

Answer 1

根據您想要實現的目標，有多種選擇：

1. 如果目標是將單獨的內容保留在 A、B、C 和 D 索引中，則可以使用 AJAX 從這些頁面載入內容並顯示它。導航中的每次單擊都會將內容首次加載到 a 中<div>並顯示它，或者檢測到它已經加載並顯示它，同時隱藏其他部分。

2. 如果伺服器支援某種形式的伺服器端包含，則可以將導航包含到每個頁面中。問題中沒有足夠的資訊來確定這是否可行。

3. 建構index.html以包含所有內容並僅顯示所選部分。隨著內容大小的增長，這不能很好地擴展，並且會預先加載所有內容，但在某些情況下可能很有用。

Answer 2

在index.html中使用導航欄並應用所有4個部分的鏈接，如下所示：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="A.html">A</a></li>
      <li><a href="B.html">B</a></li>
      <li><a href="C.html">C</a></li>
      <li><a href="D.html">D</a></li>
    </ul>
  </div>
</nav>