Foundation-Tabs

Tab-Navigation kann effektiv verschiedene Inhalte anzeigen und das Wechseln zwischen Inhalten ermöglichen.

Tab-Verwendung<ul class="tabs" data-tab>Zum Erstellen verwenden Sie <li>-Elemente für jede Option und fügen.tab-titleKlassen hinzu, um zu erstellen.

Tipp:Das aktuell ausgewählte Element kann verwenden.activeclass.

Beispiel

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#">Startseite</a></li>
  <li class="tab-title"><a href="#">Menü 1</a></li>
  <li class="tab-title"><a href="#">Menü 2</a></li>
  <li class="tab-title"><a href="#">Menü 3</a></li>
</ul>

Selbst ausprobieren »

Vertikale Tabs

Vertikale Tabs können.verticalKlasse:

Beispiel

<ul class="tabs vertical" data-tab>

Selbst ausprobieren »

Tabs wechseln

Um das Wechseln zwischen Tabs einzurichten, können Sie ein <div>-Element mit.contentclass. Fügen Sie jedem Tab eine eindeutige ID hinzu und verlinken Sie mit dem Listenelement (<a href="../index.html" öffnet den Optionsinhalt mit id="menu1"). Platzieren Sie schließlich den gesamten Optionsinhalt in<div>auf dem Element, die<div>Elemente müssen hinzugefügt werden.tabs-contentclass, und initialisieren Sie Foundation JS.

Hinweis.activeDie Klasse wird automatisch zum aktuell ausgewählten Tab hinzugefügt:

Beispiel

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#home">Startseite</a></li>
  <li class="tab-title"><a href="#menu1">Menü 1</a></li>
  <li class="tab-title"><a href="#menu2">Menü 2</a></li>
  <li class="tab-title"><a href="#menu3">Menü 3</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="home">
    <h3>STARTSEITE</h3>
    <p>Zuhause ist, wo das Herz ist..</p>
  </div>
  <div class="content" id="menu1">
    <h3>Menü 1</h3>
    <p>Etwas Text, blabla</p>
  </div>
  <div class="content" id="menu2">
    <h3>Menü 2</h3>
    <p>Ein anderer Text.</p>
  </div>
  <div class="content" id="menu3">
    <h3>Menü 3</h3>
    <p>Letzter Tab.</p>
  </div>
</div>

<!-- Foundation JS initialisieren -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Selbst ausprobieren »

Tab wird eingeblendet

Verwenden Sie CSS, um den Einblendeffekt der Tabs anzupassen:

Beispiel

.tabs-content > .content.active {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

Selbst ausprobieren »
Weitere Erweiterungen