Schede in JavaScript
Ora implementeremo le schede. Guarda subito l'esempio di ciò che è richiesto:
Studia anche il markup su cui risolveremo il problema:
<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>
#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.
Copia i codici HTML e CSS forniti. Implementa le schede secondo l'algoritmo descritto.
