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

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 Manipulation de styles CSS

Télécharger support de cours jQuery et Manipulation de styles CSS. Avant de poursuivre avec ce tutoriel, vous devez avoir une compréhension de base de HTML, CSS, JavaScript, Document Object Model (DOM) et de tout éditeur de texte.

Télécharger

Programmation MVC avec Framework Laravel

Apprendre comment utiliser le modèle MVC dans le plateforme Laravel, ce document est un cours gratuit en format PDF désigné aux développeurs web de niveau intermédiaire.

Télécharger

Connexion d’une base de données relationnelle avec un serveur WWW

Connexion d’une base de données relationnelle avec un serveur WWW , cours format PDF à télécharger sur le développement web .

Télécharger

Support de cours HTML et PHP

Télécharger support de cours sur le langage HTML et PHP, apprendre comment créer un site web interactif. Document de formation en pdf désignés pour les débutants.

Télécharger


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