Il y a 6 divs sur la page:même contenu
A B C D E F G
Je veux réutiliser ces divs pour afficher le contenu en fonction de l'onglet.
Par exemple:
Tab1 = AB
Tab2 = AC
Tab3 = ABC
et ainsi de suite ...
Quelle serait la meilleure façon de faire il (jQuery?) Des exemples?
TabTastic est une bonne approche accessible avec une documentation décente.
Avoir un DIV qui entoure toute la zone contrôlée par les onglets. Ajoutez et supprimez CLASSes 'tab1', 'tab2', 'tab3' à ce DIV externe basé sur l'onglet sélectionné. Avoir des règles CSS qui affichent les DIV internes appropriées en fonction de la CLASSE englobante. Par exemple:
#A, #B, #C, #D, #E, #F {display:none}
.tab1 #A, .tab1 #B {display:block}
.tab2 #A, .tab2 #C {display:block}
.tab3 #A, .tab3 #B, .tab3 #C {display:block}
Vous pouvez modifier le parent du contrôle sur le changement d'onglet que vous souhaitez réutiliser, par exemple. quelque chose comme:
A.parent=Tabcontroll.tabindex[1];
Pas de syntaxe correcte, mais vous avez l'idée.
Vous pouvez implémenter avec la logique ci-dessous.
Render 6 div et de le rendre style="display: none;"
Vous pouvez utiliser les onglets jQuery UI. Reportez-vous à link
Créez vos onglets comme expliqué dans les onglets de l'interface utilisateur jQuery et cliquez sur les onglets pour remplir son code HTML ou ses données après avoir obtenu des divs masqués.
Pour plus d'informations, vous pouvez consulter ci-dessous la démonstration du violon préparée. Rappelez-vous son seul exemple et l'idée de mettre en œuvre la fonctionnalité désirée
Cochez cette case