사용자 클릭에 따라 다른 섹션을 표시할 수 있는 Twitter Bootstrap을 사용하여 단일 정적 HTML 웹페이지를 만드는 방법

Question

내 프로필을 호스팅하기 위해 간단한 웹사이트를 만들고 있습니다. 레이아웃에는 Twitter Bootstrap을 사용했습니다.

내 웹사이트에는 4개의 섹션(A,B,C,D)이 있습니다. 저는 4개의 서로 다른 HTML 파일을 사용하고 있습니다(예:A.html,B.html,C.html,D.html) 섹션의 해당 텍스트를 저장합니다. 네 개의 HTML 파일 모두에서 동일한 헤더 텍스트(탐색용)를 사용해야 합니다.

하나의 HTML 파일만 사용할 수 있는 방법이 있습니까?index.html사용자가 탐색 모음을 클릭하면 해당 섹션이 표시됩니까?

정적 웹페이지만 사용할 수 있습니다. 제가 사용하고 있는 웹 호스팅 서비스는 PHP 등이 없는 정적 페이지만 허용합니다.

Answer 1

달성하려는 목표에 따라 여러 가지 옵션이 있습니다.

1. A, B, C, D 인덱스에 별도의 콘텐츠를 유지하는 것이 목표라면 AJAX를 사용하여 해당 페이지의 콘텐츠를 로드하고 표시할 수 있습니다. 탐색에서 클릭할 때마다 콘텐츠가 처음으로 로드되어 <div>표시되거나, 이미 로드되었음을 감지하여 다른 섹션을 숨긴 채 표시합니다.

2. 서버가 어떤 형태의 서버 측 포함을 지원하는 경우 탐색이 각 페이지에 포함될 수 있습니다. 이것이 가능한지 판단하기에는 질문에 정보가 충분하지 않았습니다.

3. 모든 콘텐츠를 포함하고 선택한 부분만 표시하도록 index.html을 구조화합니다. 이는 콘텐츠 크기가 커짐에 따라 확장이 잘 되지 않고 모든 콘텐츠를 미리 로드하지만 경우에 따라 유용할 수 있습니다.

Answer 2

index.html에서 navbar를 사용하고 다음과 같이 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>