Cómo crear una única página web HTML estática usando Twitter Bootstrap que puede mostrar diferentes secciones según el clic del usuario

Question

Estoy creando un sitio web sencillo para alojar mi perfil. Utilicé Twitter Bootstrap para el diseño.

Tengo 4 secciones (A,B,C,D) en mi sitio web. Estoy usando cuatro archivos html diferentes (es decirA.html,B.html,C.html,D.html) para guardar el texto correspondiente de las secciones. Tengo que usar el mismo texto de encabezado (para navegación) en los cuatro archivos html.

¿Hay alguna manera de que pueda utilizar sólo un archivo html, es deciríndice.htmly mostrar la sección correspondiente cuando el usuario hace clic en la barra de navegación?

Sólo puedo usar páginas web estáticas. El servicio de alojamiento web que estoy usando sólo permite páginas estáticas sin PHP, etc.

Answer 1

Hay varias opciones dependiendo de lo que intentas lograr:

1. Si el objetivo es mantener el contenido separado en los índices A, B, C y D, podría usar AJAX para cargar el contenido de esas páginas y mostrarlo. Cada clic en la navegación cargaría el contenido por primera vez <div>y lo mostraría, o detectaría que ya estaba cargado y lo mostraría mientras ocultaba otras secciones.

2. Si el servidor admite alguna forma de inclusión del lado del servidor, la navegación podría incluirse en cada página. No había suficiente información en la pregunta para determinar si esto sería posible.

3. Estructura index.html para incluir todo el contenido y mostrar solo la parte seleccionada. Esto no se ampliaría bien a medida que aumenta el tamaño del contenido y carga todo el contenido por adelantado, pero puede ser útil en algunos casos.

Answer 2

Utilice la barra de navegación en index.html y aplique el enlace de las 4 secciones como este:

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