Est-ce une utilisation correcte de jQuery?

Question

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

est ici la structure html + jQuery:

<ul id="tabs"> 
<li><a href="#" id="tab1" class="activetab">Tab1</a></li> 
<li><a href="#" id="tab2">Tab2</a></li> 
</ul> 

<div id="tabcontent"> 
<div id="tab1content"> 
This is tab 1 content 
</div> 
<div id="tab2content"> 
This is tab 2 content 
</div> 

$("#tab1").click(function() { 
      $("#tabcontent > div").hide(); 
      $("#tab1content").show(); 
      $("#tabs > li a").removeClass().addClass("inactivetab"); 
      $("#tab1").removeClass().addClass("activetab"); 
     }); 

Le jQuery vous voyez pour tab1 est répétée pour chaque onglet.

Answer 1

Vous devez 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 le besoin d'ajouter du nouveau code JavaScript. Les informations de 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 fonction qui s'applique à tous les onglets (trouver les nœuds parents et enfants en utilisant les sélections jQuery) et liez cette fonction unique aux gestionnaires de clic pour les onglets (vous aurez besoin d'une nouvelle classe pour identifier les éléments). Le jQuery a l'air correct, mais vous pouvez le généraliser pour qu'il fonctionne avec n nombre d'onglets

Answer 3

En outre, l'ajout d'une classe pour les onglets inactifs est probablement redondant, car si une tabulation n'a pas la classe active, elle peut être considérée comme inactive.

Answer 4

The jQuery you see for tab1 is repeated for each tab. 

Je préfère aller avec une solution générique. Utilisez la classe "tab" pour tous les onglets, écrivez un gestionnaire de clic pour cela. Utilisez $ (this) pour référencer ce qui a été cliqué.

Answer 5

Vous êtes sur la bonne voie Je ne recommanderais pas de coder les commandes pour chaque clic d'onglet. JQuery UI a une fonction de tabulation http://jqueryui.com/demos/tabs/ qui pourrait vous donner quelques idées ou pour une utilisation aussi.

Answer 6

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

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

Answer 7

ou vous pouvez simplement utiliser la fonction tabs dans jQuery UI:

$("#tabs").tabs(); 

Answer 8

pourrait également être utile pour vérifier l'effet toggle.