Schede a linguette tabs
Pannelli di contenuto selezionabili con pulsanti.
Quando si usa
Per separare informazioni correlate come descrizione, programma, requisiti e domande frequenti nello stesso spazio.
Perché si usa
Le tabs riducono la lunghezza visibile della pagina senza portare l'utente su URL differenti.
Vantaggi principali
- Pannelli collegati ai pulsanti
- Stato aria-selected aggiornato
- Un solo pannello visibile alla volta
Anteprima del risultato
Le tabs organizzano contenuti collegati tra loro in pannelli separati, senza appesantire la pagina.
Contenuto della scheda selezionata.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<div class="tabs" role="tablist">
<button role="tab" aria-selected="true" aria-controls="pannello1">Descrizione</button>
<button role="tab" aria-selected="false" aria-controls="pannello2">Programma</button>
</div>
<section id="pannello1" role="tabpanel">Testo della descrizione.</section>
<section id="pannello2" role="tabpanel" hidden>Testo del programma.</section>
<script>
document.querySelectorAll('[role="tab"]').forEach(function(tab){
tab.addEventListener('click', function(){
document.querySelectorAll('[role="tab"]').forEach(t => t.setAttribute('aria-selected','false'));
document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true);
tab.setAttribute('aria-selected','true');
document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
});
});
</script>Da personalizzare: Aggiungi o rimuovi coppie pulsante-pannello mantenendo corretti ID e aria-controls.
Errore da evitare: Non inserire troppe linguette e non nascondere informazioni che devono essere trovate facilmente dai motori di ricerca.