如何使用 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>