Verständnisfrage Bootstrap-Tabs / Tabinhalte wechslen nicht

Hallo zusammen,

erster Versuch mit contao-bootstrap und ich habe gleich mal ein paar Fragen zu Bootstrap Tabs:

Ich benötige für meine Website nur das Tabs Modul (contao-bootstrap/tab).

Ich habe jetzt

- contao-bootstrap/core und contao-bootstrap/tab installiert.

- in Themes
Typ bootstrap.layout ausgewählt
bootstrap css und js erstmal über cdn eingebunden
Anhang 25094

- im Artikel die Content-Elemente eingesetzt
Anhang 25095

Im Frontend sieht es schon mal ganz gut aus, URL hängt jeweils ein /#eins, /#zwei, /#drei an
aber "active" ändert sich nicht und die Inhalte wechseln auch nicht
Anhang 25096


Für Testzwecke habe ich mal das Beispiel-HTML von der bootstrap-Seite als HTML-Element eingebunden und da tabbt es wunderbar, BS css und js sind also wohl in Ordnung.

Code:

---

<ul class="nav nav-tabs" id="myTab">
  <li class="nav-item">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" aria-labelledby="home-tab">Text 1</div>
  <div class="tab-pane fade" id="profile" aria-labelledby="profile-tab">Text 2</div>
  <div class="tab-pane fade" id="contact" aria-labelledby="contact-tab">Text 3</div>
</div>

---

Wahrscheinlich habe ich bei dem CE der tab-Erweiterung was falsch gemacht ??
Oder sonst etwas vergessen?
Es wird bei der Erweiterung auch immer von einer Konfiguration gesprochen, die ich nirgends finden konnte ...

Code:

---

Contao-Bootstrap is a modular integration. The core components provides the infrastructure for other components.
Features
Bootstrap environment
Config system
Template pre and post render filters

---

Muss ich eigentlich obligatorisch auch contao-bootstrap/core mitinstallieren oder reicht das tab-Modul?

Puuh, soviele Fragen ; )

Viele Grüße,
conter

Evtl. etwas spät.
Aber du könntest sowas auch unabhängig von einer Erweiterung o. Bootstrap realisieren.
Die Suchmaschiene hilft.
Beispielsweise als jQuery Plugin oder via Vanilla Scripts ala:

• https://github.com/samsono/Easy-Resp...s-to-Accordion
• https://github.com/aboutwp/vanilla-tabs-js
• https://codepen.io/keenanpayne/pen/qyjrzz
• usw.

Danke, doch auf jeden Fall, das ist durchaus hilfreich, nicht soviel overload wie bootstrap.

Könnte man das Markup/die Wrapper mir RSCE bauen? Den Content will ich ja nicht ins HTML statisch eintragen.

Viele Grüße,
conter

Zitat:

---

Zitat von conter

Danke, doch auf jeden Fall, das ist durchaus hilfreich, nicht soviel overload wie bootstrap.

Könnte man das Markup/die Wrapper mir RSCE bauen? Den Content will ich ja nicht ins HTML statisch eintragen.

Viele Grüße,
conter

---

Kommt halt drauf an ob die Pflege über Redakteure etc.. erforderlich/übersichtlich gestaltet werden soll :D
Grundsätzlich sicherlich auch via RSCE machbar, da fürs Frontend ja zumeist "nur" .js und CSS Klassen o. Data-Attribute benötigt werden.