Est-ce une utilisation correcte de jQuery ?

Question

J'ai créé un affichage par onglets avec html/css. Je veux simplement utiliser jQuery pour basculer les onglets/classes. Cela fonctionne parfaitement mais je veux m'assurer d'utiliser jQuery correctement.

Voici la structure html + jQuery :

Onglet 1
Onglet 2

Le jQuery que vous voyez pour l'onglet 1 est répété pour chaque onglet.

Answer 1

Vous devriez utiliser une approche plus générique pour définir le comportement des onglets:

$('#tabs a').click(function(){
    $("#tabcontent > div").hide();
    $("#"+this.id+"content").show();
    $("#tabs > li a").removeClass().addClass("inactivetab");
    $(this).removeClass().addClass("activetab");
});

Avec ce code, il est possible d'ajouter d'autres onglets sans avoir besoin d'ajouter un nouveau code JavaScript. Les informations dans l'attribut id de la balise a sont utilisées pour déterminer le panneau de contenu à afficher.

Answer 2

Vous n'avez pas besoin de répéter le code pour chaque onglet. Au lieu de cela, écrivez une seule fonction qui s'applique à tous les onglets (en trouvant les nœuds parent et enfant en utilisant des sélections jQuery) et liez cette unique fonction aux gestionnaires de clics des onglets (vous aurez besoin d'une nouvelle classe pour identifier quels éléments sont des onglets).

Answer 3

Le code jQuery que vous voyez pour l'onglet 1 est répété pour chaque onglet.

Je préférerais opter pour une solution générique. Utilisez la classe "tab" pour tous les onglets, écrivez un gestionnaire de clics pour cela. Utilisez $(this) pour faire référence à ce qui a été cliqué.

Answer 4

Vous devriez être capable d'écrire une seule fonction, qui peut être appelée pour chaque onglet. Ou, vous pouvez faire quelque chose comme ceci :

$("#tab1, #tab2").click(function() {
  var tab = $(this);
  var tabContent = $('#' + tab.attr('id') + 'content');
  // etc.
});

Answer 5

Le jQuery semble correct, mais vous pourriez le généraliser pour qu'il fonctionne avec un nombre n de onglets.

De plus, ajouter une classe pour les onglets inactifs est probablement redondant car si un onglet n'a pas la classe active, alors il peut être considéré comme inactif.