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>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.
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>.
<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.
<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.
.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.
.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.
<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="#".
<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.
<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.
<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 :
.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 :
.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 :
.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 :
.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.
.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.
.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 :
<!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>/* 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).
<!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.
<!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.
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.
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();
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.
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().
/* 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.
/* 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.
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
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.
Tout simplement TOP TOP TOP
Merci
Comment faire un lien vers la page où se trouve les onglet et qui ouvre l’onglet 3 par exemple…
Bonjour Denis,
Il est possible de faire un lien sous la forme https://adresse/?tab=tab3
Puis il suffit de surveiller l’url, de recuperer la valeur de tab et d’activer l’onglet correspondant.
Voici un code trouvé sur stackoverflow (non testé) :
function getParameterByName(name, url = window.location.href) {name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
Merci !!