Beispiel:HTML details-7.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Registerkarten (Tab Panels)</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.tabs details')
.forEach(details => details.addEventListener('toggle', detailsToggler));
function detailsToggler(event) {
if (!event.target.open) return;
let container = event.target.closest('.tabs');
for (let details of container.querySelectorAll('details')) {
if (details != event.target)
details.open = false;
}
}
});
</script>
<style>
.tabs {
position: relative;
min-height:15em;
width: 40em;
}
.tabs details {
display: inline-block;
}
.tabs summary {
background-color: lightgrey;
border: thin solid black;
border-bottom: none;
border-radius: 0.5em 0.5em 0 0;
font-weight: bold;
height: 1.5em;
width: 11em;
padding: 0.5em 0.5em 10px;
}
.tabs summary:focus,
.tabs summary:hover {
background-color: yellow;
}
.tabs details[open] > summary {
background: white;
}
.tabs .content {
position: absolute;
left: 0;
right: 0;
background: white;
border: thin solid #ccc;
padding: .5em;
}
</style>
</head>
<body>
<h1>Registerkarten (<em>Tab Panels</em>) mit details</h1>
<div class="tabs">
<details name="tab" >
<summary> Registerkarten</summary>
<div class="content">
<p>Unter <strong>dynamischen Tabs</strong> (engl. <em>Tabbed interfaces</em> oder <em>Tab Panels</em>) versteht man das Präsentieren von Inhalten in Registerkarten. Reiter wie in einer Hängeregistratur verweisen auf die vorhandenen Registerkarten. Da nur die ausgewählte Registerkarte angezeigt wird, ist dies eine platzsparende, übersichtliche und visuell intuitive Art Inhalte zu präsentieren.</p>
</div>
</details>
<details name="tab">
<summary> Standardverhalten</summary>
<div class="content">
<p>Wenn Sie mehrere details-Elemente über ein gemeinsames name-Attribut verbinden, werden beim Öffnen eines details-Elements
bereits geöffnete details-Elemente ohne weiteres Zutun geschlossen.</p>
<p>Dies funktioniert (Stand: Dezember 2023) bereits in Chrome, Edge und Safari.</p>
</div>
</details>
<details name="tab" open>
<summary> Barrierefreiheit </summary>
<div class="content">
<p>Registerkarten müssen von allen bedienbar sein: egal ob durch Touch, mit der Maus, aber auch mit der Tastatur - z.B. mit der Tab-Taste .</p>
<p>Alles kein Problem mit dem details-Element!</p>
</div>
</details>
</div>
<article>
<h2>Natives Standardverhalten</h2>
<p>Interaktivität als Standardverhalten von nativen HTML-Elementen! - ganz ohne JavaScript!</p>
<p>In älteren Browsern hilft JavaScript bei der Funktionalität.</p>
</article>
</body>
</html>
