Gdzie wykorzystać ten przykład?
Przełączanie widoków i opisów. Wariant „Zakładki: ciemny pasek” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Przełączenie aktywnej zakładki pokazuje powiązany panel. CSS odróżnia aktywny wybór od pozostałych pozycji.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem
</body>. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Nazwy zakładek powinny być krótkie. Przy większej liczbie pozycji sprawdź przewijanie lub zawijanie na telefonie.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Zakładki: ciemny pasek
HTML
<div class="effect"><div class="tabs-pack"><div class="tab-buttons" role="tablist" aria-label="Zakładki"><button type="button" id="tab-0" role="tab" aria-selected="true" aria-controls="panel-0" tabindex="0"><span></span>Pomysł</button><button type="button" id="tab-1" role="tab" aria-selected="false" aria-controls="panel-1" tabindex="-1"><span></span>Projekt</button><button type="button" id="tab-2" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1"><span></span>Efekt</button></div><section role="tabpanel" id="panel-0" aria-labelledby="tab-0" ><h2>Zakładki</h2><p>Najpierw określ cel i kierunek swojego projektu.</p></section><section role="tabpanel" id="panel-1" aria-labelledby="tab-1" hidden><h2>Zakładki</h2><p>Nadaj pomysłowi formę i wybierz odpowiednie rozwiązania.</p></section><section role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden><h2>Zakładki</h2><p>Sprawdź działanie i pokaż gotowy projekt.</p></section></div></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.tabs-pack{width:100%;text-align:left}.tab-buttons{display:flex;gap:7px;padding:6px;overflow:auto;background:#293923;border-radius:8px}.tab-buttons button{border:1px solid transparent;border-radius:5px;background:none;color:#788d64;padding:12px 18px;font-size:13px;white-space:nowrap;transition:all .25s}.tab-buttons button[aria-selected=true]{color:#e95b30;background:#fff;color:#293923}.tab-buttons span{font:11px monospace;display:none;margin-right:9px}.tabs-pack section{padding:25px;background:white;border:1px solid #dbe4ce;border-radius:8px;margin-top:10px}.tabs-pack h2{font-size:28px}.tabs-pack [hidden]{display:none}@media(max-width:440px){.tabs-pack{display:block}.tab-buttons{flex-direction:row}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}
JavaScript
const tabs=[...document.querySelectorAll('.tabs-pack [role=tab]')];
function activate(tab){tabs.forEach(button=>{const active=button===tab;button.setAttribute('aria-selected',String(active));button.tabIndex=active?0:-1;document.getElementById(button.getAttribute('aria-controls')).hidden=!active})}
tabs.forEach((tab,i)=>{tab.addEventListener('click',()=>activate(tab));tab.addEventListener('keydown',e=>{let next;if(e.key==='ArrowRight'||e.key==='ArrowDown')next=(i+1)%tabs.length;if(e.key==='ArrowLeft'||e.key==='ArrowUp')next=(i+tabs.length-1)%tabs.length;if(e.key==='Home')next=0;if(e.key==='End')next=tabs.length-1;if(next===undefined)return;e.preventDefault();tabs[next].focus();activate(tabs[next])})});