32 lines
1.3 KiB
JavaScript
32 lines
1.3 KiB
JavaScript
|
(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
function init(el) {
|
||
|
|
const buttons = [...el.querySelectorAll('[role="tab"]')];
|
||
|
|
const panels = [...el.querySelectorAll('[role="tabpanel"]')];
|
||
|
|
|
||
|
|
// Alle außer dem ersten verstecken
|
||
|
|
panels.forEach(function (p, i) { if (i > 0) p.hidden = true; });
|
||
|
|
|
||
|
|
buttons.forEach(function (btn, i) {
|
||
|
|
btn.addEventListener('click', function () { activate(i); });
|
||
|
|
btn.addEventListener('keydown', function (e) {
|
||
|
|
if (e.key === 'ArrowRight') { e.preventDefault(); activate((i + 1) % buttons.length); }
|
||
|
|
if (e.key === 'ArrowLeft') { e.preventDefault(); activate((i - 1 + buttons.length) % buttons.length); }
|
||
|
|
if (e.key === 'Home') { e.preventDefault(); activate(0); }
|
||
|
|
if (e.key === 'End') { e.preventDefault(); activate(buttons.length - 1); }
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function activate(index) {
|
||
|
|
buttons.forEach(function (b, i) {
|
||
|
|
b.setAttribute('aria-selected', i === index ? 'true' : 'false');
|
||
|
|
});
|
||
|
|
panels.forEach(function (p, i) { p.hidden = i !== index; });
|
||
|
|
buttons[index].focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll('[data-group-tabs]').forEach(init);
|
||
|
|
}());
|