Codice completo
Ogni pulsante legge il valore di data-tab e mostra il pannello corrispondente.
<div class="tabs">
<button data-tab="html">HTML</button>
<button data-tab="css">CSS</button>
<button data-tab="js">JavaScript</button>
</div>
<section class="pannello" data-panel="html">Struttura della pagina</section>
<section class="pannello" data-panel="css" hidden>Stile della pagina</section>
<section class="pannello" data-panel="js" hidden>Interazione della pagina</section>
<script>
const pulsanti = document.querySelectorAll('[data-tab]');
const pannelli = document.querySelectorAll('[data-panel]');
pulsanti.forEach(function(pulsante) {
pulsante.addEventListener('click', function() {
const tabScelta = pulsante.dataset.tab;
pannelli.forEach(function(pannello) {
pannello.hidden = pannello.dataset.panel !== tabScelta;
});
});
});
</script>
Commento
- Gli attributi data-* collegano bottoni e pannelli senza usare molti ID.
- hidden nasconde i contenuti non selezionati.
- La logica funziona anche aggiungendo nuove schede.
Prova a modificarlo
Cambia nomi, testi e valori iniziali. Poi aggiungi una piccola regola CSS per rendere evidente lo stato dell'interfaccia.