Affichage en onglets avec jQuery jquery02

Publié le par Julien Crego
Mise à jour le

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

Edit

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.

Afficher la solution

Solution :

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

Afficher la solution HTML

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.

Afficher la solution HTML

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.

Afficher la solution CSS

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.

Afficher la solution CSS

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.

Afficher la solution HTML

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="#".

Afficher la solution HTML

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.

Afficher la solution HTML

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.

Afficher la solution HTML

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 :

Afficher la solution CSS

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 :

Afficher la solution CSS

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 :

Afficher la solution CSS

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 :

Afficher la solution CSS

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.

Afficher la solution CSS

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.

Afficher la solution CSS

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 :

Afficher la solution HTML complète

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>
Afficher la solution CSS complète

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

Afficher la solution HTML

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.

Afficher la solution HTML

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.

Afficher la solution JS

Solution JS :

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.

Afficher la solution JS

Solution JS :

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();
Afficher la solution JS

Solution JS :

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.

Afficher la solution JS

Solution JS :

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

Afficher la solution JS

Solution JS :

/* 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.

Afficher la solution JS

Solution JS :

/* 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.

Afficher la solution complète

Solution :

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

Edit

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.

1 réaction sur “ Affichage en onglets avec jQuery [jquery02] ”

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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