Beispiel:JS-Anw-TabPanel-2.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Tab Panel - 2</title>
<style>
#tablist {
list-style: none;
margin: 0;
padding: 0;
}
#tablist li {
background-color: lightgrey;
border: 1px solid black;
border-bottom: none;
border-radius: 0.5em 0.5em 0 0;
display: inline;
font-weight: bold;
height: 1em;
padding: 0.5em 0.5em 10px;
}
#tablist li:focus,
#tablist li:hover {
background-color: yellow;
}
#tablist li[aria-selected="true"] {
background-color: white;
padding: 0.5em 0.5em 11px;
}
#tabcontent {
background-color: white;
border: 1px solid black;
margin-top: 10px;
padding: 1em;
}
[aria-hidden="true"] {
display: none;
}
[aria-hidden="false"] {
display: block;
}
</style>
<script>
'use strict';
(function () {
function init() { //nur ein EventHandler für das gesamte Tab Panel
var tab = document.getElementById('tablist');
tab.addEventListener('click',clickHandler);
}
function clickHandler(elem) {
// Wo wurde geklickt?
var target = elem.target;
// Setze das ausgewählte Tab auf "nicht ausgewählt".
var selectedTab = document.querySelector('[aria-selected="true"]');
selectedTab.setAttribute('aria-selected', false);
//Setze das geklickte Tab auf ausgewählt.
target.setAttribute('aria-selected', true);
// Setze das sichtbare Panel auf "nicht sichtbar".
var panels = document.querySelector('[aria-hidden="false"]');
panels.setAttribute('aria-hidden', true);
// Identifiziere das ausgewählte Panel
var panelId =target.getAttribute('aria-controls'),
panel = document.getElementById(panelId);
panel.setAttribute('aria-hidden', false);
}
document.addEventListener(
"DOMContentLoaded",
function () { init(); }
);
}());
</script>
</head>
<body>
<h1>Tab Panel mit zugänglichen Registerkarten - 2</h1>
<main>
<div id="tabpanel">
<ul role="tablist" id="tablist">
<li id="link1" role="tab" aria-controls="panel-1" aria-selected="true">1 - Button</li>
<li id="link2" role="tab" aria-controls="panel-2" aria-selected="false">2 - Button</li>
<li id="link3" role="tab" aria-controls="panel-3" aria-selected="false">3 - Button</li>
</ul>
<div id="tabcontent">
<div id="panel-1" role="tabpanel" aria-labelledby="link1" aria-hidden="false">
<h3>Inhalt 1</h3>
<p>Dieses Tab Panel funktioniert schon - wenn man mit der Maus auf die einzelnen Steuerungselemente klickt.</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="link2" aria-hidden="true">
<h3>Inhalt 2</h3>
<p>Allerdings fehlt die Möglichkeit mit der Tab-Taste durchzutabben, wie es bei Links und Buttons möglich ist.</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="link3" aria-hidden="true">
<h3>Inhalt 3</h3>
<p>Ein Erkennen der ENTER-Taste ist ebenfalls noch nicht möglich.</p>
</div>
</div>
</div>
</main>
</body>
</html>