Twitter Bootstrap を使用して、ユーザーのクリックごとに異なるセクションを表示できる単一の静的 HTML ウェブページを作成する方法

Question

私は自分のプロフィールをホストするためのシンプルなウェブサイトを作成しています。レイアウトには Twitter Bootstrap を使用しました。

私のウェブサイトには4つのセクション（A、B、C、D）があります。4つの異なるHTMLファイルを使用しています（つまりA.html、B.html、C.html、D.html) を使用して、セクションの対応するテキストを保存します。4 つの HTML ファイルすべてで同じヘッダー テキスト (ナビゲーション用) を使用する必要があります。

1つのHTMLファイルだけを使用する方法はありますか？インデックス.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>