nicht angemeldet
AugeHallo
Auch sollte aus #tablist für die <ul> eine Klasse werden, also z.B. <ul class="tablist"> und im CSS .tablist. Im CSS müssen, als Folge daraus, noch an diversen Stellen die Selektoren angepasst werden.
Die IDs der einzelnen Tabs müssen dort und in den auslösenden Buttons auch noch geändert werden. Im zweiten tab-Panel müssen sie sich ja von denen im ersten Panel unterscheiden, da die IDs dokumentweit eindeutig sein müssen. Eine Durchnummerierung der IDs im <div> und die dazu passende Anpassung von aria-controls in den <li> sollte an der Stelle reichen.
<!-- in der Tabliste (#tablist oder .tablist) -->
<li id="link1" role="tab" aria-controls="panel-1">1 - Button</li>
<!-- im inhaltsblock (#tabcontent oder .tabcontent) -->
<div id="panel-1" role="tabpanel" aria-labelledby="link1">
Am JS-Code scheinen, über die von dir genannten, keine weiteren Änderungen nötig zu sein. Das Element, dass konkret benutzt wurde wird ja als Target ermittelt.
Man hätte hier [in der Tabliste] besser effektiv <button>-Elemente verwenden sollen.
Dann funktioniert das Beispiel ohne JS nicht mehr, oder? Wäre es da nicht sinnvoll, die Gestaltung als Tabbeable Interface per JS überhaupt erst einzuschalten und ohne JS normal untereinander liegende Blockelemente anzuzeigen?
Allerdings hört es dann auch auf, einfach zu sein.
Tschö, Auge
Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
Kleine freie Männer von Terry Pratchett
Gunnar Bittersmann