Accueil » Web » Créer une boite d'onglet avec jQuery

Créer une boite d'onglet avec jQuery

Créer une boite d'onglet avec jQuery

avec ce tutoriel vous allez apprendre comment créer une boite d'onglet avec jQuery.

Les onglets sont faciles à mettre en œuvre et peuvent être conçus pour fonctionner avec votre balisage existant. Ce guide va parcourir le processus.

Plan du document 

  • Fichiers de base
  • Utilisation du DOM
  • Avec un peu plus de complexité
  • Utilisation de jQuery

Ecrire le balisage

Commençons par écrire notre balisage comme si notre visiteur n'a même pas JavaScript activé. Même si vous ne souhaitez pas prendre en charge les utilisateurs sans JavaScript.


Hi, this is the first tab.

This is the 2nd tab.

And this is the 3rd tab.

J'ai utilisé des identifiants de fragment (# tab1, # tab2, # tab3) pour les valeurs de href dans la navigation. Chaque élément contenant le contenu d'un onglet reçoit un identifiant qui correspond à un identifiant de fragment. De cette façon, les liens sont sémantiques et continuent à être fonctionnels même si le visiteur a JavaScript désactivé.

JavaScript fournit un accès direct à l'identificateur de fragment, ou hachage, pour les objets d'élément d'ancrage et l'objet window.location en utilisant leur propriété de hachage.

$('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and its associated content
var $active, $content, $links = $(this).find('a');

// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href=''+location.hash+'']')[0] || $links[0]);
$active.addClass('active');

$content = $($active[0].hash);

// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});

// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();

// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);

// Make the tab active.
$active.addClass('active');
$content.show();

// Prevent the anchor's default click action
e.preventDefault();
});
});

Téléchargement un deuxième exemple de création des onglet à l'aide de Javascript et jQuery.

Taille de fichier : 135.46 Kb
Téléchargement: 743
Publié le: 2018-04-27 15:49:07

Profitez de ce cours intitulé Créer une boite d'onglet avec jQuery pour améliorer votre compétence dans Web et comprendre mieux jQuery.

Ce cours est adapté à votre niveau ainsi que tout les cours pdf de jQuery pour enrichir mieux votre connaissance.

Tout ce que vous devez faire est de télécharger le document de formation ,l'ouvrir et commencer à apprendre jQuery gratuitement.

Télécharger le cours

Cours dans la même catégorie :

jQuery et Ajax - Cours PDF

Télécharger ce cours en PDF intitulé jQuery et Ajax - Cours PDF

Support de cours jQuery et Ajax, document en pdf à télécharger gratuitement. AJAX est une technologie utilisée pour faciliter les changements de

Apprendre le langage HTML

Télécharger ce cours en PDF intitulé Apprendre le langage HTML

Téléchargez gratuitement ce cours intitulé «Apprendre le langage HTML» en format PDF, tutoriel en 41 chapitres et 175 pages. Un ebook gratuit cr

Les objetss et JSON - Cours PDF

Télécharger ce cours en PDF intitulé Les objetss et JSON - Cours PDF

Télécharger document en pdf intitulé les objets et JSON, ceci est un cours complet sur 50 pages traitant les notations objet et les chaines JSON.

Introduction à jQuery - Cours PDF

Télécharger ce cours en PDF intitulé Introduction à jQuery - Cours PDF

Introduction à jQuery - Cours PDF à télécharger gratuitement. Avant de poursuivre avec ce tutoriel, vous devez avoir une compréhension de base d

Cours jQuery et Les filtres

Télécharger ce cours en PDF intitulé Cours jQuery et Les filtres

Télécharger support de cours de jQuery et Les filtres (sélecteurs, filtres spécifiques, ..), document de formation en format pdf pour les débuta

Apprendre Jquery

Télécharger ce cours en PDF intitulé Apprendre Jquery

Ceci est un tutoriel de jQuery pour débutants, il fournit une connaissance approfondie de la technologie jQuery. ce didacticiel de jQuery vous aidera