Come creare: schede verticali

Impara come creare menu di schede verticali utilizzando CSS e JavaScript.

Creare schede verticali scambiabili

Primo passaggio - Aggiungi HTML:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Parigi</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London è la capitale della Gran Bretagna.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Parigi</h3>
  <p>Parigi è la capitale della Francia.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo è la capitale del Giappone.</p>
</div>

Creare pulsanti per aprire il contenuto della scheda specifica. Tutti quelli con class="tabcontent" del <div> Gli elementi sono tutti nascosti per impostazione predefinita (attraverso CSS e JS). Quando l'utente clicca sul pulsante, aprirà il contenuto della scheda associata al pulsante.

Secondo passaggio - Aggiungi CSS:

Impostare lo stile per il pulsante e il contenuto della scheda:

* {box-sizing: border-box}
/* Stile per la scheda */
.tab {
  flottante: sinistro;
  bordo: 1px solid #ccc;
  colore di sfondo: #f1f1f1;
  larghezza: 30%;
  altezza: 300px;
}
/* Stile per il pulsante che apre il contenuto della scheda */
.tab button {
  visualizzazione: blocco;
  colore di sfondo: eredito;
  colore: nero;
  margine: 22px 16px;
  larghezza: 100%;
  bordo: none;
  contorno: none;
  allineamentoTesto: sinistro;
  cursore: puntatore;
  trasformazione: 0.3s;
}
/* Cambia il colore di sfondo del pulsante quando悬停 */
.tab button:hover {
  coloreFondo: #ddd;
}
/* Crea la classe del pulsante di scheda attivo/attuale */
.tab button.active {
  coloreFondo: #ccc;
}
/* Imposta lo stile del contenuto della scheda */
.tabcontent {
  flottante: sinistro;
  riempimento: 0px 12px;
  bordo: 1px solid #ccc;
  larghezza: 70%;
  bordoSinistro: none;
  altezza: 300px;
}

Passo 3 - Aggiungi JavaScript:

function openCity(evt, cityName) {
  // Dichiarazione di tutte le variabili
  var i, tabcontent, tablinks;
  // Ottieni tutti gli elementi con class="tabcontent" e nascondili
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Ottieni tutti gli elementi con class="tablinks" e rimuovi la classe "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Visualizza la scheda corrente e aggiunge la classe "active" al link della scheda aperta
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Prova da solo

Pagine correlate

Tutorial:Come creare schede orizzontali