HTML Bedienelemente für Tabs, usw.. / <button> oder <a> ?

[Roobsen]

Hallo alle zusammen,

Ich benötige Bedienelemente für Registerkarten/Tabs, Spoiler & Akkordeons. Dafür kann ich <button> oder <a> Elemente verwenden.

Speziell für Tabs und Akkordeons gefällt mir die <button> Variante besser, da dieser auch per Tab/Enter Taste erkannt wird.

Jetzt würde es mich mal interessieren welche Variante ihr besser findet, bzw welche hier einfach die bessere Wahl wäre.

<!-- Tab Navigation -->
<div class="tab-nav">
    <button class="tablink" onclick="openTab(event, 'tab-pane-1')">HIER1</button>
    <button class="tablink" onclick="openTab(event, 'tab-pane-2')">HIER2</button>
<div>

=====> oder weiter unten <=====

<!-- Tab Navigation -->
<ul class="tab-nav">
    <li><a> href="javascript:void(0)" onclick="openTab(event, 'tab-pane-1')" tabindex="0" class="tablink">HIER1</a></li>
    <li><a> href="javascript:void(0)" onclick="openTab(event, 'tab-pane-2')" tabindex="0" class="tablink">HIER2</a></li>
<ul>

[protestix]

Wozu das Ganze mit Javascript lösen?
Schau mal hier eine responve Lösung mit CSS.

[Roobsen]

Oh das wäre natürlich auch eine Möglichkeit, sehr interessant habe ich bis jetzt auch noch nie gesehen! Bietet die JavaScript Variante irgendwelche merkbaren Nachteile?

Außerdem ist mir es auch wichtig das man zwischen den Tabs per Tab/Enter Taste wechseln kann, das ist hier nicht möglich oder?

[hausl]

Bietet die JavaScript Variante irgendwelche merkbaren Nachteile?

JS könnte deaktiviert sein.


Und das hat nichts mit PHP zu tun.

MOD: verschoben von PHP-Einseiger

[protestix]

Außerdem ist mir es auch wichtig das man zwischen den Tabs per Tab/Enter Taste wechseln kann, das ist hier nicht möglich oder?

Ja, auch das ist möglich.
Eine Anleitung dazu findet sich unter
https://t3n.de/news/css3-dynamische-tabs-ohne-365861/

[Roobsen]

JS könnte deaktiviert sein.

Oh ja daran habe ich noch gar nicht gedacht! Wirklich gut zu wissen!

Ja, auch das ist möglich. Eine Anleitung dazu findet sich unter

Ok super ich werde mir das ganze mal ansehen und testen, so ein Tab habe ich zuvor nie ausprobiert.

Danke für die tollen Info´s, schönes Wochenende euch allen!