Tab-komponent med :checked-triks kontra JS
Implementer et fanegrensesnitt ved hjelp av CSS-teknikken :checked, og sammenlign den med en JavaScript-tilnærming.
Tab-komponent med :checked-triks kontra JS er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Krav til tab-komponenten
En tab-komponent trenger en visuell indikator for den aktive taben, et tilknyttet panel som vises eller skjules ved valg, tastaturnavigering mellom taber og tilgjengelige ARIA-attributter. Dette kan oppnås med ren CSS ved hjelp av :checked-hacken eller med JavaScript for bedre tilgjengelighet.
:checked-hacken
Skjulte radio-inndata fungerer som tilstand: hver tab er en <label> koblet til en radio-inndata. Når en radio er valgt, viser CSS-søskenkombinatorer det tilsvarende panelet og stilsetter etiketten for den aktive taben. Det kreves ingen JavaScript.
<div class="tabs">
<input type="radio" name="tabs" id="tab-1" checked hidden />
<label for="tab-1">Tab One</label>
<div id="panel-1">Panel one content</div>
</div>
:checked CSS-arkitektur
Plasser radio-inndataene, deretter alle etikettene (tabene), og så alle panelene i samme beholder. Bruk den generelle søskenkombinatoren (~) til å koble en valgt radio til det tilsvarende panelet. Paneler har som standard display: none, mens det samsvarende panelet får display: block.
Begrensninger ved :checked-tilnærmingen
:checked-hacken kan ikke oppdatere ARIA-attributter (aria-selected, aria-controls), aktivere navigering mellom taber med piltastene eller omgå begrensninger i DOM-rekkefølgen (inndata før paneler), som kan komme i konflikt med krav til den visuelle utformingen. Disse manglene begrenser den reelle tilgjengeligheten.
JavaScript-tab-komponent
En JS-tab-komponent lytter etter klikkhendelser på tab-knapper, setter aria-selected på den aktive taben, oppdaterer aria-hidden på panelene og håndterer fokus. Denne tilnærmingen muliggjør full ARIA-samsvar og tastaturinteraksjonsmønstre i henhold til ARIA Authoring Practices.
ARIA-roller for taber
Bruk role="tablist" på beholderen, role="tab" på hver tab-knapp sammen med aria-selected og aria-controls, og role="tabpanel" på hvert panel sammen med aria-labelledby. Skjermlesere kunngjør antallet taber, plasseringen og den valgte tilstanden.
Mønster for tastaturinteraksjon
ARIA Authoring Practices for taber: Tab-tasten går inn i tablisten og fokuserer på den aktive taben. Venstre- og høyrepil flytter mellom tabene. Home/End hopper til den første eller siste taben. Hver bevegelse med piltastene aktiverer taben som har fokus (mønster for automatisk aktivering).
CSS for aktiv tilstand
Stilsett den aktive taben med en nederste kantlinje eller en endring i bakgrunn ved hjelp av [aria-selected="true"]-selektoren – dette fungerer både med JS- og :checked-tilnærminger. Slik holdes CSS synkronisert med ARIA-tilstandsattributtet, og De unngår dobbel tilstandsadministrasjon.
<div role="tablist">
<button role="tab" aria-selected="true">Overview</button>
<button role="tab" aria-selected="false">Details</button>
</div>
Animert indikator
En animert faneindikator glir mellom fanene: plasser et absolutt posisjonert indikatorelement, bruk JavaScript til å angi venstreposisjonen og bredden slik at de samsvarer med målene til den aktive fanen, og animer med transition: left 200ms ease, width 200ms ease.
Responsivt faneoverløp
Når fanene går utenfor beholderen på små skjermer, kan du bruke horisontal rulling (overflow-x: auto; scrollbar-width: none) eller slå dem sammen til en select-nedtrekksliste på mobil. Select-tilnærmingen krever JS for å synkronisere den innebygde select-komponenten med synligheten til faneinnholdet.
CSS-only kontra JS: Når bør du bruke hva
Bruk :checked-hacket for enkle, ikke-kritiske brukergrensesnitt der tilgjengelighet ikke er et prioritert krav. Bruk JavaScript-faner i alle produksjonsgrensesnitt som skal brukes av tastaturbrukere eller skjermleserbrukere, eller i applikasjoner som krever ARIA-samsvar ved revisjoner eller på grunn av juridiske krav.
Kunnskapssjekk
Hva er den viktigste tilgjengelighetsbegrensningen ved CSS :checked-hacket for faner?
Sammendrag
:checked-hacket gjør det mulig å bytte mellom faner med bare CSS ved hjelp av radio-inndata og søskenkombinatorer, men mangler ARIA- og tastaturtilgjengelighet. JavaScript-faner med ARIA-rollene (tablist, tab, tabpanel), håndtering av aria-selected og behandling av piltaster gir den komplette og tilgjengelige brukeropplevelsen som kreves for produksjonskomponenter.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Tab-komponent med :checked-triks kontra JS» gratis?
Ja – hele teksten i «Tab-komponent med :checked-triks kontra JS» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tab-komponent med :checked-triks kontra JS»?
Implementer et fanegrensesnitt ved hjelp av CSS-teknikken :checked, og sammenlign den med en JavaScript-tilnærming. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Tab-komponent med :checked-triks kontra JS»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Kortkomponent med egendefinerte CSS-egenskaper
- Stilsetting av modaler og dialoger
- Mønstre for nedtrekksmenyer og popover-elementer
- Tab-komponent med :checked-triks kontra JS