Créer une boite d'onglet avec jQuery

Description :

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.

Envoyé le :
27 Apr 2018
Taille :
135.46 Kb
Téléchargements :
602
Envoyé le :
08 Jun 2013
Evaluation :
Total des Votes : 1



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

Programmation Web Avancée avec JQuery

Cours de programmation web avancée avec JQuery ,une formation en pdf à télécharger gratuitement pour débutants.

Télécharger

Cours complet de jQuery

Télécharger gratuitement un cours complet de jQuery au fomat pdf. Ce tutoriel est conçu pour les programmeurs de logiciels qui veulent apprendre les bases de jQuery et ses concepts de programmation de manière simple et facile.

Télécharger

jQuery et les événements - Cours PDF

jQuery et les événements (événement souris, événement clavier, ..), support de cours en pdf à télécharger gratuitement pour les niveaux intermédiaires.

Télécharger

Cours pdf complet de ASP dot NET

Cours en pdf de ASP dot NET à télécharger gratuitement , cours trés complet sur 735 pages .

Télécharger

Supports de cours gratuit sur javascript en pdf

Support de cours à télécharger gratuitement sur la technologie Javascript et les formulaires, un document en pdf sur 17 pages pour les débutants.

Télécharger

Cours de Node.js en pdf

Télécharger cours de Node.js en format PDF par BOJ Yoann, document de formation gratuit sur 18 pages designé aux débutants.

Télécharger


Soyez le premier à écrire un commentaire sur ce fichier!
Veuillez vous identifier ou vous enregistrer.