Hauptinhalt

Tabs

letzte Aktualisierung der Seite: Version 2.17.1

Bei der Tabs-Komponente handelt es sich um HTML-Markup, über das Inhalt in Reiter gruppiert aufgeführt wird und zu einer anderen Gruppierung auf Bedarf gewechselt werden kann. Zur Nutzung der Tabs-Komponente ist das unten definierte Markup zu verwenden. Innerhalb einer Gruppierung kann beliebiger HTML-Code platziert werden. Ebenfalls können hier andere Komponenten eingebunden werden, bspw. eine Bildergalerie. Informationen zur Gestaltung von Tabs sind zu finden unter: Tabs

HTML-Einbindung

Quellcode

<!--                               -->
<!-- Definition der einzelnen Tabs -->
<!--                               -->
<ul class="nav nav-tabs"
    role="tablist">
    <li role="presentation"
        class="active">
        <a href="#themen-a-d"
           class="tab-head"
           aria-controls="themen-a-d"
           role="tab"
           data-toggle="tab">
            A-D
        </a>
    </li>
    <li role="presentation"><a class="tab-head" href="#themen-e-h" aria-controls="themen-e-h" role="tab" data-toggle="tab">E-H</a></li>
</ul>
 
<div class="tab-content">
    <!--                                        -->
    <!-- Definition eines konkreten Tavbinhalts -->
    <!--                                        -->
    <div role="tabpanel"
         class="tab-pane active"
         id="themen-a-d">
        <div class="row">
            <div class="col-sm-30 col-lg-15">
                <h2>A</h2>
                <ul class="list-links">
                    <li><a href="http://amt24.sachsen.de/">Amt 24</a></li>
                    <li><a href="http://www.justiz.sachsen.de">Amtsgerichte</a></li>
                </ul>
            </div>
            <div class="col-sm-30 col-lg-15">
                <h2>B</h2>
                <ul class="list-links">
                    <li><a href="http://www.bergbau.sachsen.de">Bergbau in Sachsen</a></li>
                    <li><a href="http://www.bildung.sachsen.de">Bildung </a></li>
                </ul>
            </div>
            <div class="clearfix hidden-lg"></div>
            <div class="col-sm-30 col-lg-15">
                <h2>C</h2>
                <ul class="list-links">
                    <li><a href="http://www.campus.sachsen.de">Campus Sachsen</a></li>
                    <li><a href="http://www.career-services.sachsen.de/">Career Services</a></li>
                </ul>
            </div>
            <div class="col-sm-30 col-lg-15">
                <h2>D</h2>
                <ul class="list-links">
                    <li><a href="http://www.demografie.sachsen.de">Demografie</a></li>
                    <li><a href="http://www.demografie.sachsen.de">Demografiemonitor Sachsen</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Erläuterung

  • Ab Zeile 4 beginnt die Definition der einzelnen Tabs. Hier findet noch keine Beschreibung der Tab-Inhalte statt.
  • In Zeile 7 wird ein Tab als aktiv markiert. Dieser Tab weist ein gesondertes Aussehen auf.
  • Das href-Attribut in Zeile 8 definiert den Inhaltsbereich, der angezeigt werden soll, sobald dieser Tab aktiviert wird.
zurück zum Seitenanfang