1 résultat trouvé pour contenu1

Créer des onglets en javascript (sous le profil dans les messages)

Alors, pas mal de petits problèmes et de simplifications possibles.

Pour commencer, la structure : en général, on essaye de faire en sorte que toutes les structures répétées soient au même niveau dans le HTML.
Pour vos onglets, c'est bien, "Personnage" et "IRL" sont au même niveau à l'intérieur de "container-onglets" :

Code:: <div class="container-onglets"> <div class="onglets active" data-anim="1">Personnage</div> <div class="onglets" data-anim="2" style="margin-left:103px;">IRL</div> </div>

Par contre, en ce qui concerne vos contenus, ils ne sont actuellement pas au même niveau, parce que contenu 2 se trouve à l'intérieur de contenu 1 : il faut changer ça pour la logique soit plus simple à comprendre. Pour plus de facilité, je vais aussi leur donner un id qui contient le numéro que vous avez dans data-anim, et retirer ce data-anim qui ne nous servira pas :

Code:: <div id="contenu1" class="contenu activeContenu"> <dl>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</dl> </div> <div id="contenu2" class="contenu"> Contenu Tab 2 </div>

Maintenant, la logique du script. Pour faire plus simple, si je décris le script en français, ça donnerait :

Quand on clique sur un ".onglets" :
- on retire la class ".active" de tous les onglets
- on retire la class ".activeContenu" de tous les contenu
- on met la class ".active" sur l'onglet sur lequel on vient de cliquer
- on met la class ".activeContenu" sur le contenu qui a un id qui s'appelle "#contenu" + valeur de data-anim de l'onglet sur lequel on vient de cliquer
Ainsi, en cliquant sur l'onglet qui possède le data-anim="1", on va ouvrir le #contenu1, data-anim="2" va ouvrir #contenu2, etc.

Vous l'avez écrit en JavaScript classique sans utiliser jQuery, je vais utiliser jQuery pour simplifier encore plus le script, au moins visuellement :

Code:: $('.onglets').click(function(){ $('.onglets').removeClass('active'); $('.contenu').removeClass('activeContenu'); $(this).addClass('active'); $('#contenu' + $(this).data('anim')).addClass('activeContenu'); });

Avec tout ça, on a donc simplifié le code, optimisé le traitement et on l'a rendu normalement plus lisible, compréhensible et maintenable !
(enfin, je trouve... c'est subjectif)