SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:JS-Anw-TabPanel-1.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 - 1</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>
 
</head>
 
<body>
<h1>Tab Panel mit zugänglichen Registerkarten<br>(funktionsloses Grundgerüst)</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> Hier kommt was hin!</p>
    </div>
    <div id="panel-2" role="tabpanel" aria-labelledby="link2" aria-hidden="true">
    <h3>Inhalt 2</h3>
      <p> Hier kommt was hin!</p>
    </div>
    <div id="panel-3" role="tabpanel" aria-labelledby="link3" aria-hidden="true">
      <h3>Inhalt 3</h3>
      <p> Hier kommt was hin!</p>
    </div>
  </div>
</div>  
 
</main>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-Anw-TabPanel-1.html&oldid=50379“