Schede in JavaScript

Ora implementeremo le schede. Guarda subito l'esempio di ciò che è richiesto:

Studia anche il markup su cui risolveremo il problema:

html<div id="parent">
  <div class="menu">
    <a href="" class="active">scheda 1</a>
    <a href="">scheda 2</a>
    <a href="">scheda 3</a>
  </div>
  <div class="tabs">
    <div class="tab active">
      testo scheda 1
    </div>
    <div class="tab">
      testo scheda 2
    </div>
    <div class="tab">
      testo scheda 3
    </div>
  </div>
</div>

css#parent {
  margin: 0 auto;
  width: 400px;
}

.menu a {
  margin-right: 5px;
  display: inline-block;
  padding: 10px;
  color: black;
  text-decoration: none;
  border: 1px solid gray;
}
.menu a:hover {
  background: #f8f8f8;
}
.menu a.active {
  border-color: transparent;
  background: #f2f2f2;
}

.tabs .tab:not(.active) {
  display: none;
}
.tabs .tab {
  padding: 10px;
  background: #f2f2f2;
  height: 300px;
}

Nota che il link attivo e la scheda attiva hanno la classe active.

Discussione

Ora discutiamo come risolvere questo problema. È ovvio che dobbiamo in qualche modo collegare i link con le rispettive schede. In questa lezione del libro di teoria, abbiamo già esaminato le possibili opzioni.

In questo caso, propongo di collegare i link e le schede semplicemente per posizione: il primo link aprirà la prima scheda, il secondo link - la seconda scheda e così via.

L'algoritmo generale sarà così: al click su un link, dobbiamo trovare il link con la classe active e rimuovere questa classe. Allo stesso modo dobbiamo trovare la scheda con questa classe e anche rimuoverle questa classe.

Poi dobbiamo prendere il link su cui è stato cliccato e attivarlo. Poi dobbiamo prendere la scheda che ha lo stesso numero del nostro link - e attivarla anche lei.