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

Question

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

Eu tenho 4 seções (A, B, C, D) no meu site. Estou usando quatro arquivos html diferentes (por exemplo, A.html, B.html, C.html, D.html ) para salvar o texto correspondente das seções. Eu 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 seja, index.html e mostrar o arquivo correspondente? seção quando o usuário clica na barra de navegação?

Eu só posso usar páginas da Web estáticas. O serviço de hospedagem na web que estou usando apenas permite 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 for manter o conteúdo separado no índice A, B, C e D, use o AJAX para carregar o conteúdo dessas páginas e exibi-lo. Cada clique na navegação iria carregar o conteúdo pela primeira vez em <div> e mostrá-lo, ou detectar que já estava carregado e mostrá-lo enquanto ocultava outras seções.

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

3. Estrutura index.html para incluir todo o conteúdo e mostrar apenas a parte selecionada. Isso não seria dimensionado bem à medida que o tamanho do conteúdo aumenta e carrega todo o conteúdo na frente, mas pode ser útil em alguns casos.