Onglets en JavaScript

Nous allons maintenant implémenter des onglets. Regardez immédiatement l'exemple de ce qui est demandé :

Étudiez également le balisage sur lequel nous allons résoudre le problème :

<div id="parent">
	<div class="menu">
		<a href="" class="active">onglet 1</a>
		<a href="">onglet 2</a>
		<a href="">onglet 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			texte de l'onglet 1
		</div>
		<div class="tab">
			texte de l'onglet 2
		</div>
		<div class="tab">
			texte de l'onglet 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;
}

Notez que le lien actif et l'onglet actif ont la classe active.

Discussion

Discutons maintenant de la manière de résoudre ce problème. Il est évident que nous devons d'une certaine manière relier les liens aux onglets correspondants. Dans cette leçon du manuel théorique, nous avons déjà examiné les options possibles.

Dans ce cas, je propose de relier les liens et les onglets simplement par leur position : le premier lien ouvrira le premier onglet, le deuxième lien - le deuxième onglet, et ainsi de suite.

L'algorithme général ressemblera à ceci : lors d'un clic sur un bouton, nous devons trouver le lien avec la classe et lui retirer cette classe. De la même manière, nous devons trouver l'onglet avec cette classe et lui retirer également cette classe.

Ensuite, nous devons prendre le lien sur lequel on a cliqué et l'activer. Puis nous devons prendre l'onglet qui a le même numéro que notre lien - et l'activer également.

Copiez les codes HTML et CSS fournis. Implémentez les onglets selon l'algorithme décrit.