Como criar uma única página HTML estática usando o Twitter Bootstrap, que pode mostrar diferentes seções conforme o clique do usuário

Question

Estou criando um site simples para hospedar meu perfil. Usei o Twitter Bootstrap para layout.

Tenho 4 seções (A,B,C,D) em meu site. Estou usando quatro arquivos HTML diferentes (ou seja,A.html,B.html,C.html,D.html) para salvar o texto correspondente das seções. Tenho que usar o mesmo texto de cabeçalho (para navegação) em todos os quatro arquivos HTML.

Existe alguma maneira de usar apenas um arquivo HTML, ou sejaindex.htmle mostrar a seção correspondente quando o usuário clicar na barra de navegação?

Só posso usar páginas da web estáticas. O serviço de hospedagem web que estou usando permite apenas páginas estáticas sem PHP etc.

Answer 1

Existem várias opções dependendo do que você está tentando alcançar:

1. Se o objetivo é manter o conteúdo separado nos índices A, B, C e D, você pode usar AJAX para carregar o conteúdo dessas páginas e exibi-lo. Cada clique na navegação carregaria o conteúdo pela primeira vez em um arquivo <div>e o mostraria, ou detectaria que ele já estava carregado e o mostraria enquanto ocultava outras seções.

2. Se o servidor suportar alguma forma de inclusão do lado do servidor, a navegação poderá ser incluída em cada página. Não havia informações suficientes na pergunta para determinar se isso seria possível.

3. Estruture index.html para incluir todo o conteúdo e mostrar apenas a parte selecionada. Isso não seria bem dimensionado à medida que o tamanho do conteúdo aumentasse e carregasse todo o conteúdo antecipadamente, mas pode ser útil em alguns casos.

Answer 2

Use a barra de navegação em index.html e aplique o link de todas as 4 seções como esta:

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