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

Plan de cours

  • 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.

 

Description : Télécharger cours gratuit sur Créer une boite d'onglet avec jQuery, ebook de Web en PDF de 6 pages.
Autheur :
Taille de fichier : 135.46 Kb
Nombre de pages : 6
Type de fichier : PDF
Téléchargement: 753
Niveau: Débutant
License: Creative commons
Publié le: 2018-04-27

Ce cours intitulé Créer une boite d'onglet avec jQuery est à télécharger gratuitement, plusieurs autre documents sous la catégorie Web sont disponibles dans ce site, que ce soit vous êtes débutant ou professionel ce cours de jQuery va vous aider à améliorer votre compétence et votre savoire faire dans le Web.

Profitez de ce manuel de formation en PDF pour comprendre mieux le jQuery et enrichir votre connaissance.

Commencez à télécharger ce cours adapté pour vous et à apprendre jQuery.

Télécharger le cours

Cours dans la même catégorie :