IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Mise en place d'une navigation par onglets avec jQuery
Par Didier Mouronval

Le , par Bovino
8 commentaires

11PARTAGES

4  0 


Suite à la sortie de mon livre sur jQuery (jQuery. La bibliothèque qui simplifie l'interaction), je vous propose d'en découvrir un extrait.

Cet article vous montre comment mettre en place facilement une navigation par onglets avec jQuery.

Vous trouverez aussi en fin d'article un autre exemple ajoutant des effets sur l'exemple décrit.

N'hésitez pas à me faire part de vos commentaires et remarques.
De plus, vous aurez peut-être envie d'ajouter vos propres effets à ceux déjà disponibles, n'hésitez pas à les partager !

Mise en place d'une navigation par onglets avec jQuery.

Vous avez lu gratuitement 1 122 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

8 commentaires
Commenter Signaler un problème
Avatar de
https://www.developpez.com
Le 22/11/2011 à 22:52
Vous noterez que l'on ne va pas placer un gestionnaire sur chacun des onglets mais sur la barre d'onglets (balise <ul> elle-même
Très bonne idée !

$('#onglets').click(function(event) {...}
Moins bonne idée !
Les délégués servent à placer ce type d'évènements.

Code : Sélectionner tout 
1
2
3
4
$("#onglets").delegate('li', 'click', function() { };
// ou avec jQuery 1.7
$("#onglets").on('click', 'li', function() { };
if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
A faire du jQuery, autant en faire jusqu'au bout. Surtout quand l'équivalent javascript pur, bien que plus performant, devient très difficile à lire !
Code : Sélectionner tout 
1
2
3
var $target = $(event.target);
if ( ! $target.is('li') || $target.hasClass('actif') ) { }
Sinon bon tuto
2  0 
Bovino
Avatar de Bovino
Rédacteur https://www.developpez.com
Le 26/11/2011 à 16:14
J'ai le choix entre ta vidéo de formation et "Javascript: The Definitive Guide" de Danid Flanagan aux éditions Broché.
A mon sens, les deux ne répondent pas aux mêmes besoins.

Ma formation sur JavaScript permet d'apprendre la programmation en JavaScript. C'est-à-dire qu'elle ne se veut pas exhaustive au niveau de la syntaxe, mais elle te permet d'apprendre comment coder en JavaScript.
Le livre de David Flanagan quant à lui est un livre assez particulier puisqu'il constitue une référence écrite du langage (et particulièrement à jour dans sa dernière version), en revanche, apprendre JavaScript avec risque d'être compliqué voire ardu car il présente plus un listing des objets existants et de leurs propriétés et méthodes plus qu'une façon de les mettre en oeuvre dans un script.

Du coup, si tu en as les moyens, je te conseillerais les deux, sinon, pour débuter, ce serait plutôt ma formation.
1  0 
Bovino
Avatar de Bovino
Rédacteur https://www.developpez.com
Le 23/11/2011 à 20:27
Salut yotsumi.

Merci pour ces commentaires pertinents

C'est un choix que j'ai fait mais tes remarques sont d'autant plus appropriées que je suis aussi un fervent militant de
A faire du jQuery, autant en faire jusqu'au bout.
0  0 
dupard2006
Avatar de dupard2006
Candidat au Club https://www.developpez.com
Le 24/11/2011 à 9:36
A mon niveau débutant, on fait ce genre de menu rien qu'avec du CSS, j'ai un peu de mal à comprendre l'intérêt de javascript ou de jQuery
Cela ne retire pas les soucis de compatibilité aux navigateurs ou personnes qui désactivent les scripts ?
Pouvais-vous m'éclairer.
Un grand merci d'avance
0  0 
Bovino
Avatar de Bovino
Rédacteur https://www.developpez.com
Le 24/11/2011 à 11:54
on fait ce genre de menu rien qu'avec du CSS


J'aimerais bien voir comment
0  0 
Aurelien Plazzotta
Avatar de Aurelien Plazzotta
Membre extrêmement actif https://www.developpez.com
Le 24/11/2011 à 17:59
Bonjour et merci pour le tuto

Je suis intéressé par l'achat du bouquin mais je m’interroge.

Faut-il déjà avoir un niveau correct en javascript ou est-il accessible à des débutants?

Pour être honnête, je n'ai aucune compétence en Javascript.
0  0 
Bovino
Avatar de Bovino
Rédacteur https://www.developpez.com
Le 24/11/2011 à 20:28
Salut Kenaryn.

Je ne sais pas si je suis le mieux placé pour te répondre, parce que moi, je préférerais que tu l'achètes

Pour être franc, il n'est pas nécessaire à mon avis d'être très expérimenté en JavaScript pour le lire, mais un minimum de connaissance du langage est malgré tout requis.
Malgré tout, j'ai essayé de mettre un maximum d'exemples afin de permettre aux moins expérimentés de bien visualiser ce dont il est question.
0  0 
Aurelien Plazzotta
Avatar de Aurelien Plazzotta
Membre extrêmement actif https://www.developpez.com
Le 24/11/2011 à 22:49
Ok jte remercie pour ta franchise

Si j'ai bien saisi, je dois donc passer par l'apprentissage du Js.

J'ai le choix entre ta vidéo de formation et "Javascript: The Definitive Guide" de Danid Flanagan aux éditions Broché.

Le 1e en français, y en a pour 8h, le 2e en anglais y en a pour... 8 semaines
0  0 
Commenter Signaler un problème