Cet exercice consiste à créer un système d’affichage sous la forme d’onglets en utilisant le framework jQuery.
Aperçu du résultat final
Consignes de l’exercice
Préparation de l’exercice
Créez un dossier racine qui contiendra tous vos fichiers de l’exercice.
Créez une nouvelle page HTML avec la structure suivante en prenant bien soin de l’enregistrer dans votre dossier racine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exo onglets avec jQuery</title>
</head>
<body>
</body>
</html>Créez une nouvelle feuille de styles dans votre dossier racine.
Intégrez la feuille de style que vous venez de créer dans l’en-tête de votre page html.
Afficher la solutionPréparation du contenu des onglets
HTML : Insérez trois éléments <div> avec pour chacun un des id suivants : onglet1, onglet2 et onglet3. Insérez du texte dans chacun des éléments <div>.
HTML : Ajoutez la classe CSS tab pour chacun des trois éléments div, puis ajoutez une deuxième classe tab-active au premier élément.
CSS : Utilisez le sélecteur CSS vous permettant de sélectionner les trois éléments de contenu et masquez-les avec la propriété CSS display. Profitez-en pour leur ajouter une bordure.
CSS : Utilisez le sélecteur CSS vous permettant de sélectionner uniquement le premier élément de contenu et affichez-le avec la propriété CSS display.
A cette étape de l’exercice, vous ne devriez avoir qu’un seul des éléments de visible.
Préparation des onglets
HTML : Au dessus des contenus, créez une liste non-numérotées contenant le texte des trois onglets.
Afficher la solutionHTML : Ajoutez des liens sur les textes des onglets avec href="#".
HTML : Ajoutez la classe CSS tab-nav-active au premier des 3 liens créés précédemment et l’id tab-nav à la liste.
HTML : Ajoutez l’attribut html data-tab aux trois liens avec comme valeur : onglet1, onglet2 et onglet3.
A ce point d’étape, votre page doit ressembler à l’image ci-dessous :
CSS : Utilisez le sélecteur #tab-nav li et la propriété display afin d’afficher le menu sous la forme suivante :
CSS : Utilisez le sélecteur #tab-nav pour supprimer les marges internes et les marges externes de la liste afin d’obtenir le résultat suivant :
CSS : Utilisez le sélecteur adapté pour modifier les liens des onglets et obtenir un résultat correspondant à l’image ci-dessous :
CSS : Utilisez la classe distinguant le premier onglet pour l’afficher comme dans l’exemple ci-dessous :
CSS : En utilisant un positionnement relatif sur la liste, réglez la position du menu afin de ne pas avoir de bordure visible sur l’onglet actif.
CSS : Ajoutez un effet de survol à vos liens pour changer la couleur d’arrière-plan au passage de la souris.
Afficher la solutionAnimation des onglets avec jQuery
Vos fichiers sont prêts, nous allons maintenant passer à l’animation de la page afin d’avoir un système d’onglets. Pour cela, nous allons devoir intégrer le framework jQuery ainsi qu’un fichier javascript à notre page web.
Les fichiers créés précédemment sont disponibles ci-dessous :
Fichier HTML complet Fichier CSS completHTML : Intégrez jQuery dans l’en-tête de votre site web en utilisant la version CDN (Content Delivery Network).
Afficher la solutionCréez un nouveau fichier .js en prenant soin de bien l’enregistrer dans votre dossier racine.
HTML : Intégrez le nouveau fichier .js dans votre page web. Prenez garde à bien l’intégrer après jQuery.
Tout est en place. Nous allons maintenant programmer le comportement des onglets en javascript en nous basant sur le framework jQuery. Ouvrez donc le fichier .js afin de le modifier.
JS : La première chose à faire est d’ajouter le code permettant d’attendre que la page soit chargée avant de lancer la surveillance des clics sur les onglets. Nous travaillerons maintenant systématiquement entre les lignes 1 et 3 actuelles.
jQuery( document ).ready(function() {
/* Code de gestion des onglets */
});JS : Nous allons maintenant surveiller les clics sur les liens du menu.
jQuery( document ).ready(function() {
/* On surveille les clics sur les liens du menu de navigation */
jQuery('#tab-nav a').click(function(e){
/* Code a executer en cas de clic sur un des liens */
});
});JS : Avant tout traitement, nous allons ajouter le code permettant de désactiver le comportement classique du lien. Ajoutez donc le code suivant :
e.preventDefault();Afficher la solution
JS : La prochaine étape est la récupération de l’attribut data-tab du lien sur lequel l’internaute clique. Cela va nous permettre de déterminer quel onglet doit être activé. Cette valeur est récupérée dans une variable nommée tab via le sélecteur this (correspondant à l’élément sur lequel l’internaute viens de cliquer) et la fonction data de jQuery.
var tab = jQuery(this).data('tab'); Afficher la solution JS : Nous allons maintenant masquer tous les onglets et ré-afficher celui qui doit l’être. Pour cela, nous allons utiliser les fonctions addClass() et removeClass() de jQuery. L’idée est de supprimer la classe tab-active de partout et de la placer sur le contenu qui doit être affiché. On utilise donc le sélecteur .tab correspondant à la classe des contenus et on supprimer la classe tab-active avec la fonction removeClass(). Pour l’ajout de la classe, on se base cette fois-ci sur l’id qui est déterminé par la valeur récupérée à la question précédente et on utilise la fonction addClass().
/* On suprime la class tab-active de tous les contenus */
jQuery('.tab').removeClass('tab-active');
/* On ajoute la classe tab-active à l'onglet qui doit être visible */
jQuery('#'+tab).addClass('tab-active'); Afficher la solution JS : En suivant la même logique que dans les étapes précédentes, il faut maintenant supprimer la classe tab-nav-active de tous les liens du menu pour l’ajouter au lien du menu sur lequel l’internaute vient de cliquer.
CSS : Il reste maintenant à peaufiner l’affichage des onglets en CSS.
Correction de l’exercice
Voici donc tous les fichiers complets et commentés :
Fichier HTML final Fichier CSS final Fichier JS final