Affichage en onglets avec jQuery jquery02

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

Consultez ce code créé par crego (@crego) sur le site CodePen.

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>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

Créez une nouvelle feuille de styles dans votre dossier racine.

Intégrez la feuille de styles que vous venez de créer dans l’en-tête de votre page html.

Solution HTML :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

Préparation du contenu des onglets

HTML : Insérez trois éléments <div> avec pour chacun l’id correspondant : onglet1, onglet2 et onglet3. Insérez du texte dans chacun des éléments <div>.

Solution HTML :
<div id="onglet1">
     Onglet 1
</div>
<div id="onglet2">
     Onglet 2
</div>
<div id="onglet3">
     Onglet 3
</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.

Solution HTML :
<div id="onglet1" class="tab tab-active">
     Onglet 1
</div>
<div id="onglet2" class="tab">
     Onglet 2
</div>
<div id="onglet3" class="tab">
     Onglet 3
</div>

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.

Solution CSS :
.tab {
     display: none ;
     border: 1px solid #cccccc ;
}

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.

Solution CSS :
.tab {
     display: none ;
     border: 1px solid #cccccc ;
}
.tab-active {
     display: block ;
}

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.

Solution HTML :
<ul>
    <li>Onglet 1</li>
    <li>Onglet 2</li>
    <li>Onglet 3</li>
</ul>

HTML : Ajoutez des liens sur les textes des onglets avec href="#".

Solution HTML :
<ul>
    <li><a href="#">Onglet 1</a></li>
    <li><a href="#">Onglet 2</a></li>
    <li><a href="#">Onglet 3</a></li>
</ul>

HTML : Ajoutez la classe CSS tab-nav-active au premier des 3 liens créés précédemment et la classe tab-nav à la liste.

Solution HTML :
<ul class="tab-nav">
    <li><a href="#" class="tab-nav-active">Onglet 1</a></li>
    <li><a href="#">Onglet 2</a></li>
    <li><a href="#">Onglet 3</a></li>
</ul>

HTML : Ajoutez l’attribut html data-tab aux trois liens avec comme valeur : onglet1, onglet2 et onglet3.

Solution HTML :
<ul class="tab-nav">
    <li><a href="#" data-tab="onglet1" class="tab-nav-active">Onglet 1</a></li>
    <li><a href="#" data-tab="onglet2">Onglet 2</a></li>
    <li><a href="#" data-tab="onglet3">Onglet 3</a></li>
</ul>

À 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 :

Solution CSS :
.tab-nav li {
    display: inline-block ;
}

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 :

Solution CSS :
.tab-nav {
    margin: 0px ;
    padding: 0px ;
}

CSS : Utilisez le sélecteur adapté pour modifier les liens des onglets et obtenir un résultat correspondant à l’image ci-dessous :

Solution CSS :
.tab-nav a {
    display: block ;
    border: 1px solid #cccccc ;
    border-width: 1px 1px 0 1px ;
    padding: 10px 5px ;
    border-radius: 5px 5px 0 0 ;
    background-color: #cccccc ;
}

CSS : Utilisez la classe distinguant le premier onglet pour l’afficher comme dans l’exemple ci-dessous :

Solution CSS :
.tab-nav .tab-nav-active {
    background-color: #ffffff ;
}

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.

Solution CSS :
.tab-nav {
    margin: 0px ;
    padding: 0px;
    position: relative ;
    bottom: -1px ;
}

CSS : Ajoutez un effet de survol à vos liens pour changer la couleur d’arrière-plan au passage de la souris.

Solution CSS :
.tab-nav a:hover {
    background-color: #ffffff ;
}

Animation 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 :

Solution HTML :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Exo onglets avec jQuery</title>
		<link href='styles.css' type='text/css' rel='stylesheet'>
    </head>
    <body>
		<!-- Navigation -->
		<ul class="tab-nav">
			 <li><a href="#" data-tab="onglet1" class="tab-nav-active">Onglet 1</a></li>
			 <li><a href="#" data-tab="onglet2">Onglet 2</a></li>
			 <li><a href="#" data-tab="onglet3">Onglet 3</a></li>
		</ul>
	
		<!-- Contenu des onglets -->
		<div id="onglet1" class="tab tab-active">
			 Onglet 1
		</div>
		<div id="onglet2" class="tab">
			 Onglet 2
		</div>
		<div id="onglet3" class="tab">
			 Onglet 3
		</div>
    </body>
</html>
Solution CSS :
Solution CSS :
/* Navigation */
.tab-nav {
    margin: 0px ;
    padding: 0px ;
    position: relative ;
    bottom: -1px ;
}
.tab-nav li {
    display: inline-block ;
}
.tab-nav a {
    display: block ;
    border: 1px solid #cccccc ;
    border-width: 1px 1px 0 1px ;
    padding: 10px 5px ;
    border-radius: 5px 5px 0 0 ;
    background-color: #cccccc ;
}
.tab-nav a:hover {
    background-color: #ffffff ;
}
.tab-nav .tab-nav-active {
    background-color: #ffffff ;
}

/* Contenu des onglets */
.tab {
    display: none ;
    border: 1px solid #cccccc ;
}
.tab-active {
    display: block ;
}

HTML : Intégrez jQuery dans l’en-tête de votre site web en utilisant la version CDN (Content Delivery Network).

Solution HTML :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Exo onglets avec jQuery</title>
	<link href='styles.css' type='text/css' rel='stylesheet'>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
				integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
				crossorigin="anonymous"></script>
    </head>

Cré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.

Solution HTML :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Exo onglets avec jQuery</title>
	<link href='styles.css' type='text/css' rel='stylesheet'>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
				integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
				crossorigin="anonymous"></script>
	<script type="text/javascript" src="script-onglets.js"></script>
    </head>

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. Pour cela, il est nécessaire d’utiliser la fonction ready() de jQuery.

Solution javascript :
jQuery( document ).ready(function() {
     /* Emplacement de notre script  */
});

JS : Nous allons maintenant surveiller les clics sur les liens du menu. Pour cela, il est nécessaire cette fois-ci d’utiliser la fonction click() de jQuery.

Solution javascript :
jQuery( document ).ready(function() {
    /* On surveille les clics sur les liens du menu de navigation */
    jQuery('.tab-nav a').click(function(e){
        /* Code a exécuter 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();
Solution javascript :
jQuery('.tab-nav a').click(function(e){
    e.preventDefault();
});

JS : La prochaine étape est la récupération dans une variable 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 doit donc être 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.

Solution javascript :
jQuery('.tab-nav a').click(function(e){
    e.preventDefault();
    var tab = jQuery(this).data('tab');
});

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().

Solution javascript :
/* 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');	

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.

Solution javascript :
/* On supprime la classe pour tous les liens */
jQuery('.tab-nav a').removeClass('tab-nav-active');

/* On ajoute la classe pour le lien sur lequel l'internaute vient de cliquer */
jQuery(this).addClass('tab-nav-active');

CSS : Il reste maintenant à peaufiner l’affichage des onglets en CSS.

Correction de l’exercice

Vous trouverez la solution complète de l’exercice en cliquant sur le bouton ci-dessous.

Solution complète

La solution proposée utilise le langage SCSS. Pour afficher le code CSS correspondant veuillez cliquer sur le bouton View Compiled en bas à droite lorsque vous activez l’onglet SCSS.

Consultez ce code créé par crego (@crego) sur le site CodePen.

Sauf mention contraire*, l'article Affichage en onglets avec jQuery [jquery02] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

4 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
domf40
domf40
1 année il y a

Tout simplement TOP TOP TOP
Merci

Denis
6 mois il y a

Comment faire un lien vers la page où se trouve les onglet et qui ouvre l’onglet 3 par exemple…

Denis
Répondre à  Julien Crego
6 mois il y a

Merci !!