So erstellen Sie mit Twitter Bootstrap eine einzelne statische HTML-Webseite, die je nach Benutzerklick unterschiedliche Abschnitte anzeigen kann

Question

Ich erstelle eine einfache Website, um mein Profil zu hosten. Für das Layout habe ich Twitter Bootstrap verwendet.

Ich habe 4 Abschnitte (A, B, C, D) auf meiner Website. Ich verwende vier verschiedene HTML-Dateien (dhA.html, B.html, C.html, D.html), um den entsprechenden Text der Abschnitte zu speichern. Ich muss in allen vier HTML-Dateien denselben Kopfzeilentext (für die Navigation) verwenden.

Gibt es eine Möglichkeit, nur eine HTML-Datei zu verwenden, d. h.Hauptseiteund den entsprechenden Abschnitt anzeigen, wenn der Benutzer auf die Navigationsleiste klickt?

Ich kann nur statische Webseiten verwenden. Der von mir genutzte Webhosting-Dienst erlaubt nur statische Seiten ohne PHP usw.

Answer 1

Je nachdem, was Sie erreichen möchten, stehen Ihnen mehrere Optionen zur Verfügung:

1. Wenn das Ziel darin besteht, den separaten Inhalt in den Indexen A, B, C und D beizubehalten, könnte AJAX verwendet werden, um den Inhalt von diesen Seiten zu laden und anzuzeigen. Jeder Klick in der Navigation würde den Inhalt entweder zum ersten Mal in eine Seite laden <div>und anzeigen oder erkennen, dass er bereits geladen wurde, und ihn anzeigen, während andere Abschnitte ausgeblendet werden.

2. Wenn der Server eine Form von Server Side Includes unterstützt, könnte die Navigation in jede Seite integriert werden. Die Frage enthielt nicht genügend Informationen, um zu bestimmen, ob dies möglich wäre.

3. Strukturieren Sie index.html so, dass der gesamte Inhalt enthalten ist und nur der ausgewählte Teil angezeigt wird. Dies lässt sich bei wachsendem Inhalt nicht gut skalieren und lädt den gesamten Inhalt im Voraus, kann aber in einigen Fällen nützlich sein.

Answer 2

Verwenden Sie die Navigationsleiste in index.html und wenden Sie Links auf alle 4 Abschnitte wie folgt an:

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