AlpineJS und TailwindCSS - Tabs realisieren?

[Dsimon24]

Hallo zusammen,

mit folgendem Code möchte ich gerne die Möglichkeit von Tabs realisieren:

<div x-data="{ 'stammdaten': true, 'weitere_daten': false, 'sonstiges': false }">
    <div class="hidden sm:block">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
                <a href="#stammdaten" @click="stammdaten = true" class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" aria-current="page">Stammdaten</a>

                <a href="#weitere_daten" @click="weitere_daten = true" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Weitere Daten</a>

                <a href="#sonstiges" @click="sonstiges = true" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Sonstiges</a>
            </nav>
        </div>
    </div>

    <div x-show="stammdaten"><h1>Inhalt: Stammdaten</h1></div>

    <div x-show="weitere_daten"><h1>Inhalt: Weitere Daten</h1></div>

    <div x-show="sonstiges"><h1>Inhalt: Sonstiges</h1></div>

</div>

Mit x-data="{ 'stammdaten': true, 'weitere_daten': false, 'sonstiges': false }"
sorge ich dafür, dass im Ursprung nur das erste Tab angezeigt wird.

Klicke ich auf die anderen Tabs, werden diese nun dazugeschaltet. Wie kann
ich denn aber dafür sorgen, dass die anderen beiden tabs dann wieder aus-
geblendet werden? Geht das mit AlpineJS?

LG

PS: Vielleicht habt ihr auch noch eine Idee, wie ich mit Tailwind realisieren
kann, dass das angeklickte Tab entsprechend auch als selected markiert
wird?

 

[redeye86]

Hallo, ohne jetzt damit gearbeitet zu haben, kannst du nicht statt den drei Variablen eine active_tab einführen, die du dann beim click Event auf den entsprechenden Modus setzt und in den content Bereichen auf den jeweiligen Namen prüfst?

Also zb.
@click="active_tab = 'stammdaten'"
und
x-show="active_tab == 'stammdaten'"