Beispiel:JS-Anw-TabPanel-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>