I tab sono uno degli elementi più utilizzati nello sviluppo web moderno perché permettono di organizzare diversi contenuti all'interno di uno spazio ridotto, migliorando la navigazione e l'esperienza dell'utente. Sono spesso utilizzati per gestire categorie, schede prodotto, caratteristiche tecniche o sezioni informative senza dover ricaricare le pagine.
In questo tutorial vedremo come creare un sistema di schede completamente personalizzato utilizzando HTML, CSS e JavaScript, sfruttando gli attributi data-* (dataset) per gestire il collegamento dinamico tra pulsanti e contenuti. Questo approccio permette di mantenere il codice più ordinato e facilmente estendibile, senza dover creare una logica JavaScript specifica per ogni singolo elemento.
Come creare delle tab dinamiche con HTML, CSS e JavaScript
L'obiettivo sarà realizzare un componente interattivo in cui, al click su un tab, JavaScript individuerà automaticamente il contenuto associato e aggiornerà la visualizzazione mostrando la sezione corretta. In questo modo sarà possibile aggiungere nuove schede o modificare quelli esistenti intervenendo semplicemente sulla struttura HTML.
Analizzeremo la creazione della struttura HTML, la gestione dello stile tramite CSS e il funzionamento dello script JavaScript che permette il cambio dinamico dei contenuti, ottenendo un sistema leggero, riutilizzabile e adattabile a diversi progetti web.
I linguaggi che verranno utilizzati
Per realizzare questo sistema di tab utilizzeremo tre linguaggi fondamentali dello sviluppo front-end: HTML, CSS e JavaScript. L'HTML definirà la struttura delle schede e dei relativi contenuti, utilizzando gli attributi data-* per creare un collegamento dinamico tra pulsanti e sezioni. Il CSS gestirà invece l'aspetto grafico, lo stile dei pulsanti e la visualizzazione della scheda attiva. Infine, JavaScript aggiungerà l'interattività, leggendo i dataset associati alle schede e mostrando automaticamente il contenuto corretto al click dell'utente.
Il risultato finale sarà un componente composto da più pulsanti e sezioni dinamiche: inizialmente verrà mostrato un contenuto predefinito, mentre selezionando gli altri tab sarà possibile cambiare visualizzazione senza ricaricare la pagina.
Di seguito un'anteprima della struttura che andremo a creare:
- il primo tab contiene il primo blocco di informazioni visibile inizialmente.
- il secondo permette di visualizzare un secondo contenuto collegato.
- il terzo mostra un'ulteriore sezione informativa.
<body>
<div class="tabs-container">
<!-- Pulsanti dei tab -->
<div class="tabs-buttons">
<button class="tab-button active" data-tab="tab1">Tab 1</button>
<button class="tab-button" data-tab="tab2">Tab 2</button>
<button class="tab-button" data-tab="tab3">Tab 3</button>
</div>
<!-- Contenuti associati ai tab -->
<div class="tabs-content">
<div class="tab-panel active" id="tab1">
<h3>Contenuto del Tab 1</h3>
<p>
Questo è il primo contenuto visualizzato all'apertura della pagina.
</p>
</div>
<div class="tab-panel" id="tab2">
<h3>Contenuto del Tab 2</h3>
<p>
Questo contenuto viene mostrato quando viene selezionato il secondo tab.
</p>
</div>
<div class="tab-panel" id="tab3">
<h3>Contenuto del Tab 3</h3>
<p>
Questo contenuto viene mostrato quando viene selezionato il terzo tab.
</p>
</div>
</div>
</div>
</body>
</html>Il codice CSS per i tab
Dopo aver creato la struttura HTML, il secondo passaggio consiste nel definire lo stile grafico del nostro sistema di tab tramite CSS. In questa fase andremo a personalizzare l'aspetto dei pulsanti, definiremo il comportamento visivo della scheda selezionata e gestiremo la visualizzazione dei contenuti. L'obiettivo è fare in modo che solamente il pannello attivo sia visibile, mentre gli altri rimangano nascosti fino alla selezione dell'utente.
Per ottenere questo risultato utilizzeremo principalmente due classi: .active, che identifica il tab attualmente selezionato, e .tab-panel, che gestisce la visibilità dei contenuti.
/* Contenitore principale */
.tabs-container {
max-width: 700px;
margin: 40px auto;
}
/* Pulsanti dei tab */
.tabs-buttons {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.tab-button {
padding: 12px 20px;
border: none;
background-color: #eeeeee;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: 0.3s;
}
/* Stato attivo della scheda */
.tab-button.active {
background-color: #333333;
color: white;
}
/* Contenuti */
.tab-panel {
display: none;
padding: 20px;
border: 1px solid #dddddd;
border-radius: 5px;
}
/* Contenuto visibile */
.tab-panel.active {
display: block;
}Il codice JavaScript
A seguire il codice JavaScript per il nostro progetto:
// Selezioniamo tutti i pulsanti delle schede
const tabButtons = document.querySelectorAll(".tab-button");
// Selezioniamo tutti i pannelli contenuto
const tabPanels = document.querySelectorAll(".tab-panel");
// Aggiungiamo l'evento click a ogni pulsante
tabButtons.forEach((button) => {
button.addEventListener("click", () => {
// Recuperiamo il valore del dataset
const targetTab = button.dataset.tab;
// Rimuoviamo la classe active da tutti i pulsanti
tabButtons.forEach((btn) => {
btn.classList.remove("active");
});
// Rimuoviamo la classe active da tutti i contenuti
tabPanels.forEach((panel) => {
panel.classList.remove("active");
});
// Attiviamo il pulsante selezionato
button.classList.add("active");
// Mostriamo il contenuto collegato
document.getElementById(targetTab).classList.add("active");
});
});Il funzionamento dello script si basa principalmente sulla proprietà dataset, che permette a JavaScript di leggere facilmente gli attributi personalizzati creati nell'HTML.
Ad esempio, quando l'utente clicca sul pulsante: <button data-tab="tab2"> JavaScript recupera automaticamente il valore tab2 e cerca l'elemento con lo stesso identificativo:
<div id="tab2">Dopo aver trovato il contenuto corretto, lo script applica la classe active, rendendolo visibile tramite le regole CSS definite in precedenza.
Grazie a questo sistema, la gestione dei tab diventa completamente dinamica: per aggiungere una nuova sezione sarà sufficiente creare un nuovo pulsante con il relativo data-tab e un nuovo pannello con lo stesso id, senza modificare il codice JavaScript.
Risultato finale e commento
Dopo aver inserito il codice HTML, CSS e JavaScript, il nostro sistema è pronto per essere utilizzato. Il risultato ottenuto è un componente interattivo in cui l'utente può cambiare contenuto semplicemente selezionando uno dei pulsanti disponibili, senza dover ricaricare la pagina.
Al caricamento iniziale viene mostrato automaticamente il primo contenuto associato al tab attivo. Quando viene selezionato un altro pulsante, JavaScript individua il pannello collegato tramite il dataset, rimuove lo stato attivo dagli altri elementi e aggiorna la visualizzazione mostrando solamente la nuova sezione scelta.
Questo approccio permette di creare un sistema ordinato, leggero e facilmente riutilizzabile in diversi contesti, come schede prodotto, sezioni FAQ, descrizioni suddivise per categorie o pannelli informativi.
Di seguito è possibile vedere il funzionamento del componente realizzato:
Come mostrato nell'anteprima, il cambio dei contenuti avviene in modo immediato e dinamico grazie alla combinazione tra la struttura HTML, le regole CSS e la logica JavaScript basata sugli attributi data-*. Inoltre, la gestione tramite dataset rende il sistema facilmente estendibile: aggiungere nuovi tab richiede solamente la creazione di un nuovo pulsante e del relativo contenuto collegato.
In questo tutorial abbiamo visto come creare un sistema di schede dinamico utilizzando HTML, CSS e JavaScript, sfruttando gli attributi data-* per collegare in modo semplice pulsanti e contenuti.
Questa soluzione permette di realizzare componenti interattivi, ordinati e facilmente personalizzabili, che possono essere adattati a diversi progetti web senza dover ricorrere a librerie esterne.
