tabbed-navigation

Darstellung

• Tab 1
• Tab 2
• Tab 3

Code

<ul class="tabbed-navigation" role="tablist">
    <li class="btn-tabbed current" id="tab-btn-1" data-tab="#tab-1" role="tab" aria-selected="true" tabindex="0">
        Tab 1
    </li>
    <li class="btn-tabbed" id="tab-btn-2" data-tab="#tab-2" role="tab" aria-selected="false" tabindex="-1">
        Tab 2
    </li>
    <li class="btn-tabbed" id="tab-btn-3" data-tab="#tab-3" role="tab" aria-selected="false" tabindex="-1">
        Tab 3
    </li>
</ul>

<div id="tab-1" class="tab current-tab" role="tabpanel" aria-labelledby="tab-btn-1">
<h2>Reiter 1</h2>
Content
</div>

<div id="tab-2" class="tab" role="tabpanel" aria-labelledby="tab-btn-2" hidden>
<h2>Reiter 2</h2>
Content
</div>

<div id="tab-3" class="tab" role="tabpanel" aria-labelledby="tab-btn-3" hidden>
<h2>Reiter 3</h2>
Content
</div>