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

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

Télécharger

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 données en temps réel et les mises à jour sur une page sans nécessiter de rechargement de page.

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

Support de cours Ajax en pdf

Support de cours complet de Ajax à télécharger gratuitement , une formation gratuite sur 314 pages pour les niveaux intermédiaires

Télécharger

Support de cours CMS Wordpress en pdf

Support de cours Wordpress en pdf pour créer facilement votre site en quelque minutes, apprenez à développer et à gérer votre continu en ligne.

Télécharger

Cours de Magento Commerce

Cours de Magento commerce à télécharger gratuitement, formation complète sur 70 pages pour débutants.

Télécharger


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