doc_aria_tabs.html (2619B)
1 <!DOCTYPE html> 2 <html><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <meta charset="utf-8"> 5 6 <style type="text/css"> 7 .tabs { 8 padding: 1em; 9 } 10 11 [role="tablist"] { 12 margin-bottom: -1px; 13 } 14 15 [role="tab"] { 16 position: relative; 17 z-index: 1; 18 background: white; 19 border-radius: 5px 5px 0 0; 20 border: 1px solid grey; 21 border-bottom: 0; 22 padding: 0.2em; 23 } 24 25 [role="tab"][aria-selected="true"] { 26 z-index: 3; 27 } 28 29 [role="tabpanel"] { 30 position: relative; 31 padding: 0 0.5em 0.5em 0.7em; 32 border: 1px solid grey; 33 border-radius: 0 0 5px 5px; 34 background: white; 35 z-index: 2; 36 } 37 38 [role="tabpanel"]:focus { 39 border-color: orange; 40 outline: 1px solid orange; 41 } 42 </style> 43 <script> 44 'use strict'; 45 /* exported changeTabs */ 46 function changeTabs(target) { 47 const parent = target.parentNode; 48 const grandparent = parent.parentNode; 49 50 // Remove all current selected tabs 51 parent 52 .querySelectorAll('[aria-selected="true"]') 53 .forEach(t => t.setAttribute("aria-selected", false)); 54 55 // Set this tab as selected 56 target.setAttribute("aria-selected", true); 57 58 // Hide all tab panels 59 grandparent 60 .querySelectorAll('[role="tabpanel"]') 61 .forEach(p => (p.hidden = true)); 62 63 // Show the selected panel 64 grandparent.parentNode 65 .querySelector(`#${target.getAttribute("aria-controls")}`) 66 .removeAttribute("hidden"); 67 } 68 </script> 69 <title>ARIA: tab role - Example - code sample</title> 70 </head> 71 <body id="body"> 72 73 <div class="tabs"> 74 <div id="tablist" role="tablist" aria-label="Sample Tabs"> 75 <button onclick="changeTabs(this)" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1"> 76 First Tab 77 </button> 78 <button onclick="changeTabs(this)" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2"> 79 Second Tab 80 </button> 81 <button onclick="changeTabs(this)" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3"> 82 Third Tab 83 </button> 84 </div> 85 <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> 86 <p>Content for the first panel</p> 87 </div> 88 <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden=""> 89 <p>Content for the second panel</p> 90 </div> 91 <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden=""> 92 <p>Content for the third panel</p> 93 </div> 94 </div> 95 </body></html>