bootstrap navbar

[LudwigM]

Hallo,
Ich möchte gerne eine bootstrap navbar Navigation auf meiner Seite haben. Dazu nutze ich

Spoiler: HTML-Code

<nav class="navbar navbar-expand-md navbar-dark bg-secondary" aria-label="Fourth navbar example">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Expand at md</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExample04">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu" aria-labelledby="dropdown04">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form>
          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
        </form>
      </div>
    </div>
  </nav>

Wie sorge ich nun dafür, dass beim Klick auf ein <li> Element der Liste (z.B. 'Home' oder 'Link') der entsprechende Inhalt angezeigt wird?
Meine erste Idee wäre, unter href die entsprechende php Datei zu verlinken, und auf jeder dieser Seiten die Navigation per php include einbinden.
Meine zweite Idee wäre, beim Klick auf ein Element, in einen unter der Navigation platzierter <div> per jQuery/Ajax den Seiteninhalt zu laden.
Was davon ist besser? Gibt es eine bessere Alternative?

Danke im Voraus
Ludwig

 

[Aaron3219]

Ich persönlich würde deinen zweiten Ansatz verfolgen. So sparst du dir nicht nur PHP, sofern du es nirgendwo anders benutzt, du sparst dir vor allem Ladezeit.

Beim Neuladen der Seite müssen Dinge wie Script- und Style-Einbindungen jedes mal neu geladen werden.

Mein Tipp: Lade die Sachen mit Ajax, aber schau dir auch die History API an, so kannst du auch den Browserverlauf ändern. Wäre ja doof, wenn sich beim Klick auf eine neue Seite die URL oben nicht ändert ;)

Sei dir aber bewusst, dass das ganze auch die ein oder andere Zeile Code benötigt, wenn du es selber machst. Aber es bringt dir bestimmt einiges für zukünftige Projekte.

Edit: Zum Thema bessere Alternativen würde ich sagen, dass Frameworks normalerweise mit irgendeiner Form von Routing kommen, die dir das Leben deutlich einfacher machen. Die bessere Alternative wäre also ein Front-End-Framework zu verwenden.
Je nachdem, wie erfahren du schon bist, musst du selbst wissen, ob du bereit für sowas bist.