Как создать одну статическую HTML-страницу с помощью Twitter Bootstrap, которая может отображать различные разделы по щелчку пользователя

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 для загрузки контента с этих страниц и его отображения. Каждый щелчок в навигации либо загрузит контент в первый раз в и покажет его <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>