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

Introduction à la bibliothèque JavaScript jQuery

Le but de jQuery est de rendre beaucoup plus facile l'utilisation de JavaScript sur votre site web. Télécharger cours intitulé Introduction à la bibliothèque JavaScript jQuery, document de formation en pdf pour les étudiants aux niveaux débutants.

Télécharger

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.

Télécharger

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 de HTML, CSS, JavaScript, Document Object Model (DOM) et de tout éditeur de texte.

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

Cours pdf sur Bootstrap

Cours pdf sur Bootstrap à télécharger , une formation gratuite sur 26 pages pour les débutants.

Télécharger

Support de cours de PHP 5

Ce cours vous apprendra à vous initier à tous les aspects du langage PHP, depuis la syntaxe jusqu'aux meilleures techniques de programmation. De nombreux exemples facilitent la compréhension par l'expérience.Cours de PHP 5 format pdf à télécharger gratuitement.

Télécharger


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