Système d'onglets en Javascript, (X)html et CSS dans la même page
ybouane Système d'onglets en Javascript, (X)html et CSS dans la même page Note : 2.9/5 (4 votes) Derniéres modifications : 24/08/2009 à 23:28:47 Mots-Clés : système d'onglet javascript html css sans rechargement même page script javascript js onglet partie séparer contenu en onglets Bonjour, dans ce script, je vais vous montrer comment faire un système d'onglets utilisant l'(X)html, le CSS et le Javascript. Il n'a besoin que d'une seule page pour fonctionner. Ce système ne nécessite pas de recharger la page pour acceder à un autre onglet. Il est compatible avec tout les navigateurs. Pour le fonctionnement, c'est simple, les contenus de tout les onglet seront cachés, seul celui qui est ouvert sera affiché. Lorsque quelqu'un change d'onglet, une fonction Javascript modifie le style du bouton de l'ancien onglet, cache son contenu, modifie le style du bouton de l'onglet choisi et affiche son contenu. Voici le code: Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Un système d'onglet en javascript</title> <script type="text/javascript"> //<!-- function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet'; document.getElementById('onglet_'+name).className = 'onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //--> </script> <style type="text/css"> .onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; border:1px solid black; cursor:pointer; } .onglet_0 { background:#bbbbbb; border-bottom:1px solid black; } .onglet_1 { background:#dddddd; border-bottom:0px solid black; padding-bottom:4px; } .contenu_onglet { background-color:#dddddd; border:1px solid black; margin-top:-1px; padding:5px; display:none; } ul { margin-top:0px; margin-bottom:0px; margin-left:-10px } h1 { margin:0px; padding:0px; } </style> </head> <body> <div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span> <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span> <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_quoi"> <h1>Quoi?</h1> Un simple système d'onglet utilisant les technologies:<br /> <ul> <li>(X)html</li> <li>CSS</li> <li>Javascript</li> </ul> </div> <div class="contenu_onglet" id="contenu_onglet_qui"> <h1>Qui?</h1> C'est un script réalisé par Ybouane,<br /> Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a> </div> <div class="contenu_onglet" id="contenu_onglet_pourquoi"> <h1>Pourquoi?</h1> Pour simplifier la navigation et la diviser en parties </div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> </body> </html> Essayer L'utilisation du script est assez simple, pour faire un onglet, il faut ajouter: dans la partie onglets: Code: (X)html <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> et dans la partie contenus: Code: (X)html <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div> j'espère que vous avez compris le principe. C'est tout pour ce script! merci, j'espère que vous avez aimés ce script et qu'il vous sera utile Scripts et tutoriaux similaires à celui ci: Recharger/Actualiser une page en javascript Faire des onglet en (X)html/CSS Faire un input file stylé en Css (X)html et Javascript Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Faire un calendrier en javascript avec un effet de transparence Afficher/Cacher un div(element) en javascript Précharger des images en javascript et detecter la fin du prechargement Aller à la page précédente et suivante en javascript objet history Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par ir0nik le 24/08/2009 à 16:21:53 Très bon tuto, bien utile. Par contre, les onglets se mettent en ligne sous IE... Envoyé par ybouane le 24/08/2009 à 23:29:12 Ok, le problème est corrigé :) Envoyé par Eagle le 25/08/2009 à 14:01:05 Très bon tuto !! Merci! Envoyé par lopette le 28/08/2009 à 16:20:18 merci, c'est ce que je cherchais depuis longtemps ! Envoyé par Am3d64 le 14/09/2009 à 23:36:03 Dis moi ce serai possible d'ajouter un "fade in" avec Jquery lors de l apparition de la "div"? J'ai essayé mais je sais pas comment inserer le éfadein" dans le code ni où.... Envoyé par Aloade le 30/09/2009 à 12:01:50 Très bon bout de code et en plus il est utilisable pour les utilisateurs sans javascript activé :) j'ai pu le mettre sur mon site www.aloade.net sans soucis :p Merci encore :) Envoyé par ybouane le 01/10/2009 à 23:05:13 Bonjour, Am3d64, je n'utilise pas vraiment les bibliothèque Javascript donc je ne peut pas faire ce que tu veut. Désolé Envoyé par Peter parker le 28/10/2009 à 16:44:19 Merci mille fois , j'ai chercher partout a faire ceci . je n'ai trouver que des choses vagues , grâce a vous je suis arriver a faire ce que je voulais . exemple ici : http://www.inforumatique.fr/ tout en bas , j'ai pu mettre les parties de mon forum dans des div que je cache et ça raccourci ma page d'index incroyablement , merci encore mille fois ! Envoyé par cypherk le 03/11/2009 à 17:34:30 merci se code est super je te remercie mais je suis a la recherche d'un code en javascript pour faire le formulaire dans lequel je suis entrain de t écrire et que l on peu poster dans la page si tu pourrai m aider je te remercie beaucoup Envoyé par king male le 24/02/2010 à 10:02:31 Ce code est bien fait et il est très pratique surtout avec une amélioration de style CSS. Une autre amélioration pour ce code que je permette de le rajouter pour plus de prestation. j'ai utiliser ce bout de code avec une bibliothèque jquery et j'ai rencontrer un problème d'affichage, pour le résoudre je suggère d'ajouter pour chaque div de classe contenu_onglet : style="display:none" pour que ce code soit plus complet. et un très grand merci pour ce code qui, pour moi, est plus intéressent que les solution en jquery ou mootools ... car il est tout simplement plus simple. Envoyé par psg le 15/03/2010 à 16:28:39 excellent et simple d'utilisation ! merci Envoyé par CC30 le 20/03/2010 à 11:17:41 Est-il possible d'afficher les onglets sur le côté droit ? Comment faire ? Merci d'avance. Envoyé par Alison le 23/03/2010 à 20:52:52 Bonjour, Super. Que faudrait-il changer pour que le contenu d'un onglet apparaisse lorsque l'on survole son nom avec la souris? Merci d'avance Envoyé par CC30 le 24/03/2010 à 20:22:13 Il suffit de remplacer "onclick" dans le lien sur l'onglet par "onmouseover" ;) Envoyé par Bad Girl le 05/04/2010 à 18:46:05 BONJOUR, Premièrement merci pour ce tutoriel . Mais je rencontre un petit problème ... Je voudrai changer le nom des onglets " Quoi " , " Qui " et " pourquoi " mais lorsque je les change le contenu des onglets n'apparait plus ... Pourtant j'ai tout changé mais ça ne marche pas . Comment faire pour changer leur nom sans que le contenu disparaisse ? Merci d'avance Envoyé par JIb le 08/04/2010 à 22:26:19 Bonjour, J'aimerais savoir ce qu'il faudrait modifier pour que le contenu de l'onglet s'affiche au survolage de la souris. Merci d'avance pour la réponse. Envoyé par Bad Girl le 11/04/2010 à 17:15:50 Bonjour jlb Tu as la réponse à ta question juste au dessus ^^ Envoyé par Shinou le 11/04/2010 à 18:21:07 BONJOUR excusez moi si je parais bête mais étant absolument nulle en codage je ne sais pas où placer quoi ^^' Quelqu'un pourrait il m'aider s'il vous plait ? Envoyé par Bad Girl le 12/04/2010 à 19:18:10 Tu dois placer ce code dans ta partie HTML ( Page D'accueil ) Envoyé par Shinou le 13/04/2010 à 11:46:48 Ah oui >.< Merci !! Envoyé par ybouane le 14/04/2010 à 23:50:05 Bonjour, @Bad Girl : Je crois que tu a oublié de changer les noms dans partie contenus. Cordialement :) Envoyé par Mitch le 26/04/2010 à 13:45:36 Bonjour, ce script est très utile et m'a beaucoup aidé. Cependant j'ai un petit problème : j'ai un script de cover-flow orienté objet en javascript et je souhaiterais insérer une instance de cover-flow dans chaque onglet. Le problème c'est que ç ane marche pas, je n'arrive à en afficher un que dans le premier. Savez vous à quoi celà est du ? Un conflit entre les deux javascript ? Merci de votre aide et bravo pour le travail fait sur le site ! Envoyé par Pietro le 04/06/2010 à 02:22:38 Excellent tuto, merci beaucoup :) Envoyé par lElOl le 21/06/2010 à 05:19:40 Bonjour, J'ai enfin trouvé ce que je voulais. Cependant, un petit problème se présente à moi. J'utilise ce script plusieurs fois par page (annonces : 3 onglets par annonce : général / détails / historique) Il apparait que seul le 1er onglet de la première annonce s'affiche. Les autres sont fonctionnels, mais restent "vierges" aussi longtemps que l'on agit pas dessus. Or j'aimerais que le 1er onglet soit actif pour chacune des annonces. Une idée pour ça ? Merci d'avance Envoyé par Cécile le 04/07/2010 à 17:16:23 Bonjours, j'aimerais savoir comment mettre les onglets en bas plutôt qu'en haut. Merci d'avance. Envoyé par Irish le 19/07/2010 à 22:47:02 est-il possible de mettre ce code sur un forum de forum actif?. si oui ou? Merci d'avance Envoyé par Gebeka le 05/08/2010 à 15:00:56 Merci pour ce tuto! j'ai pu intégré facilement les onglets dans mon site. Envoyé par IRES le 26/10/2010 à 21:50:30 Je rencontre le même problème que IEIOI, à savoir qu'il est impossible d'insérer deux systèmes d'onglets qui fonctionnent correctement. J'ai fait plusieurs tentatives en modifiant le code mais sans résultats. Si quelqu'un connaît une astuce, merci de nous la communiquer. Envoyé par SamC7 le 20/01/2011 à 11:10:25 Bonjour, ce tuto m'a, à de nombreuses reprises, aidé pour mes site et forum. Cependant me voilà dans le cas où j'ai besoin d'insérer un autre système d'onglet dans ce système d'onglet... Mais impossible... quelqu'un aurait une idée ? Envoyé par Meliane le 22/01/2011 à 13:09:15 J'adore votre tuto, il est genial et personalisable en plus ! Que demande le peuple :) Par contre, j'aurais voulu savoir comment m'y prendre si je veux le mettre en vertiacale? Il y a peu de chance que j'ai une reponse maintenant, mais comme on dit, qui ne tente rien :). Envoyé par Cyllan le 04/02/2011 à 15:16:16 Merciiiiiiiiiiiiii ! Je vais enfin pouvoir faire une page d'accueil en onglets ! Merci mille fois \o/ Envoyé par Anolefa le 22/02/2011 à 14:21:31 thanck Envoyé par Inko Nito le 24/02/2011 à 12:18:25 Tres bon code, simple et efficace - MERCI !! Envoyé par razhen le 10/03/2011 à 18:53:44 +1, nice. Envoyé par nanou2224 le 28/04/2011 à 09:57:20 merci pour ce code, que je vais mettre sous le coude, car ce n'est pas vraiment cela que je cherchais, mais cela peut me servir quand même merci beaucoup Envoyé par Drullthar le 09/05/2011 à 23:04:58 Un énorme merci pour ce code simple, astucieux et efficace ! Avec de bonnes images pour les onglets, ça devient vraiment à la fois pratique et esthétique ! Continue comme ça ybouane, je compte plus les fois ou SupportDuWeb m'a sorti d'une impasse ! Envoyé par jbedgy82 le 18/05/2011 à 15:10:49 Rapide, simple, efficace! J'arrive sur le site... j'y reste! Un grand merci. Envoyé par amazigh97 le 18/06/2011 à 12:49:28 Slt, Tout d'abord, très bon turoriel, très utile. Par contre, lorsqu'on ouvre la page, l'onglet "quoi" est deja ouvert. Et moi, je souhaite que lorsque l'on ouvre la page, aucun onglet n'est ouvert (sauf si l'on clique dessus). Aussi, je voulais demander si quelqu'un savait comment faire pour que lorsqu'on clique autre part dans la page ou sur le l'onglet ouvert, l'onglet actif se ferme. MERCIIII !!! Envoyé par aksoft le 13/09/2011 à 18:08:49 Bonjour, merci pour le tuto :) peu tu me dire a quoi servent les classes : systeme_onglets, onglets et contenu_onglets ? Merci :) Envoyé par beli7706 le 21/12/2011 à 11:15:01 Salut Merci pour ce bout de code. Il est super. Beaucoup de courage à vous. Envoyé par Sakura le 28/12/2011 à 15:40:30 Merci beaucoup !!!! =DD Sa aide énormement ! <3 Envoyé par xcsbhhia le 24/01/2012 à 12:30:03 20 Envoyé par Annick le 24/01/2012 à 16:42:21 SUPER!! Et simple! Merci Envoyé par david le 25/01/2012 à 20:47:51 pas inscrit, mais j'ai trouver ce script simple et génial, l'explication est clair! Merci..

Système d'onglets en Javascript, (X)html et CSS dans la même page

ybouane

Système d'onglets en Javascript, (X)html et CSS dans la même page
Note : 2.9/5 (4 votes)
Derniéres modifications : 24/08/2009 à 23:28:47
Mots-Clés : système d'onglet javascript html css sans rechargement même page script javascript js onglet partie séparer contenu en onglets

Bonjour,
dans ce script, je vais vous montrer comment faire un système d'onglets utilisant l'(X)html, le CSS et le Javascript.
Il n'a besoin que d'une seule page pour fonctionner.
Ce système ne nécessite pas de recharger la page pour acceder à un autre onglet.
Il est compatible avec tout les navigateurs.

Pour le fonctionnement, c'est simple, les contenus de tout les onglet seront cachés, seul celui qui est ouvert sera affiché.
Lorsque quelqu'un change d'onglet, une fonction Javascript modifie le style du bouton de l'ancien onglet, cache son contenu, modifie le style du bouton de l'onglet choisi et affiche son contenu.

Voici le code:

Code: (X)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Un syst&egrave;me d'onglet en javascript</title>

    <script type="text/javascript">

        //<!--

                function change_onglet(name)

                {

                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';

                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';

                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';

                        document.getElementById('contenu_onglet_'+name).style.display = 'block';

                        anc_onglet = name;

                }

        //-->

        </script>

    <style type="text/css">

        .onglet

        {

                display:inline-block;

                margin-left:3px;

                margin-right:3px;

                padding:3px;

                border:1px solid black;

                cursor:pointer;

        }

        .onglet_0

        {

                background:#bbbbbb;

                border-bottom:1px solid black;

        }

        .onglet_1

        {

                background:#dddddd;

                border-bottom:0px solid black;

                padding-bottom:4px;

        }

        .contenu_onglet

        {

                background-color:#dddddd;

                border:1px solid black;

                margin-top:-1px;

                padding:5px;

                display:none;

        }

        ul

        {

                margin-top:0px;

                margin-bottom:0px;

                margin-left:-10px

        }

        h1

        {

                margin:0px;

                padding:0px;

        }

        </style>

</head>

<body>

        <div class="systeme_onglets">

        <div class="onglets">

            <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>

            <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>

            <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>

        </div>

        <div class="contenu_onglets">

            <div class="contenu_onglet" id="contenu_onglet_quoi">

                <h1>Quoi?</h1>

                Un simple syst&egrave;me d'onglet utilisant les technologies:<br />

                <ul>

                    <li>(X)html</li>

                    <li>CSS</li>

                    <li>Javascript</li>

                </ul>

            </div>

            <div class="contenu_onglet" id="contenu_onglet_qui">

                <h1>Qui?</h1>

                C'est un script r&eacute;alis&eacute; par Ybouane,<br />

                Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>

            </div>

            <div class="contenu_onglet" id="contenu_onglet_pourquoi">

                <h1>Pourquoi?</h1>

                Pour simplifier la navigation et la diviser en parties

            </div>

        </div>

    </div>

    <script type="text/javascript">

        //<!--

                var anc_onglet = 'quoi';

                change_onglet(anc_onglet);

        //-->

        </script>

</body>

</html>

Essayer

L'utilisation du script est assez simple,
pour faire un onglet, il faut ajouter:
dans la partie onglets:

Code: (X)html

<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>

et dans la partie contenus:

Code: (X)html

<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

j'espère que vous avez compris le principe.

C'est tout pour ce script!
merci, j'espère que vous avez aimés ce script et qu'il vous sera utile

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par ir0nik le 24/08/2009 à 16:21:53

Très bon tuto, bien utile. Par contre, les onglets se mettent en ligne sous IE...

Envoyé par ybouane le 24/08/2009 à 23:29:12

Ok, le problème est corrigé :)

Envoyé par Eagle le 25/08/2009 à 14:01:05

Très bon tuto !! Merci!

Envoyé par lopette le 28/08/2009 à 16:20:18

merci, c'est ce que je cherchais depuis longtemps !

Envoyé par Am3d64 le 14/09/2009 à 23:36:03

Dis moi ce serai possible d'ajouter un "fade in" avec Jquery lors de l apparition de la "div"? J'ai essayé mais je sais pas comment inserer le éfadein" dans le code ni où....

Envoyé par Aloade le 30/09/2009 à 12:01:50

Très bon bout de code et en plus il est utilisable pour les utilisateurs sans javascript activé :)
j'ai pu le mettre sur mon site www.aloade.net sans soucis :p

Merci encore :)

Envoyé par ybouane le 01/10/2009 à 23:05:13

Bonjour,
Am3d64, je n'utilise pas vraiment les bibliothèque Javascript donc je ne peut pas faire ce que tu veut.
Désolé

Envoyé par Peter parker le 28/10/2009 à 16:44:19

Merci mille fois , j'ai chercher partout a faire ceci . je n'ai trouver que des choses vagues , grâce a vous je suis arriver a faire ce que je voulais . exemple ici :

http://www.inforumatique.fr/

tout en bas , j'ai pu mettre les parties de mon forum dans des div que je cache et ça raccourci ma page d'index incroyablement , merci encore mille fois !

Envoyé par cypherk le 03/11/2009 à 17:34:30

merci se code est super je te remercie mais je suis a la recherche d'un code en javascript pour faire le formulaire dans lequel je suis entrain de t écrire et que l on peu poster dans la page si tu pourrai m aider je te remercie beaucoup

Envoyé par king male le 24/02/2010 à 10:02:31

Ce code est bien fait et il est très pratique surtout avec une amélioration de style CSS.
Une autre amélioration pour ce code que je permette de le rajouter pour plus de prestation.
j'ai utiliser ce bout de code avec une bibliothèque jquery et j'ai rencontrer un problème d'affichage, pour le résoudre je suggère d'ajouter pour chaque div de classe contenu_onglet : style="display:none" pour que ce code soit plus complet.
et un très grand merci pour ce code qui, pour moi, est plus intéressent que les solution en jquery ou mootools ... car il est tout simplement plus simple.

Envoyé par psg le 15/03/2010 à 16:28:39

excellent et simple d'utilisation !

merci

Envoyé par CC30 le 20/03/2010 à 11:17:41

Est-il possible d'afficher les onglets sur le côté droit ? Comment faire ?
Merci d'avance.

Envoyé par Alison le 23/03/2010 à 20:52:52

Bonjour,

Super. Que faudrait-il changer pour que le contenu d'un onglet apparaisse lorsque l'on survole son nom avec la souris? Merci d'avance

Envoyé par CC30 le 24/03/2010 à 20:22:13

Il suffit de remplacer "onclick" dans le lien sur l'onglet par "onmouseover" ;)

Envoyé par Bad Girl le 05/04/2010 à 18:46:05

BONJOUR,

Premièrement merci pour ce tutoriel .
Mais je rencontre un petit problème ... Je voudrai changer le nom des onglets " Quoi " , " Qui " et " pourquoi " mais lorsque je les change le contenu des onglets n'apparait plus ... Pourtant j'ai tout changé mais ça ne marche pas .
Comment faire pour changer leur nom sans que le contenu disparaisse ?

Merci d'avance

Envoyé par JIb le 08/04/2010 à 22:26:19

Bonjour,

J'aimerais savoir ce qu'il faudrait modifier pour que le contenu de l'onglet s'affiche au survolage de la souris. Merci d'avance pour la réponse.

Envoyé par Bad Girl le 11/04/2010 à 17:15:50

Bonjour jlb

Tu as la réponse à ta question juste au dessus ^^

Envoyé par Shinou le 11/04/2010 à 18:21:07

BONJOUR

excusez moi si je parais bête mais étant absolument nulle en codage je ne sais pas où placer quoi ^^'
Quelqu'un pourrait il m'aider s'il vous plait ?

Envoyé par Bad Girl le 12/04/2010 à 19:18:10

Tu dois placer ce code dans ta partie HTML ( Page D'accueil )

Envoyé par Shinou le 13/04/2010 à 11:46:48

Ah oui >.<
Merci !!

Envoyé par ybouane le 14/04/2010 à 23:50:05

Bonjour,
@Bad Girl : Je crois que tu a oublié de changer les noms dans partie contenus.

Cordialement :)

Envoyé par Mitch le 26/04/2010 à 13:45:36

Bonjour, ce script est très utile et m'a beaucoup aidé.
Cependant j'ai un petit problème : j'ai un script de cover-flow orienté objet en javascript et je souhaiterais insérer une instance de cover-flow dans chaque onglet. Le problème c'est que ç ane marche pas, je n'arrive à en afficher un que dans le premier. Savez vous à quoi celà est du ? Un conflit entre les deux javascript ?

Merci de votre aide et bravo pour le travail fait sur le site !

Envoyé par Pietro le 04/06/2010 à 02:22:38

Excellent tuto, merci beaucoup :)

Envoyé par lElOl le 21/06/2010 à 05:19:40

Bonjour,

J'ai enfin trouvé ce que je voulais. Cependant, un petit problème se présente à moi. J'utilise ce script plusieurs fois par page (annonces : 3 onglets par annonce : général / détails / historique)

Il apparait que seul le 1er onglet de la première annonce s'affiche. Les autres sont fonctionnels, mais restent "vierges" aussi longtemps que l'on agit pas dessus. Or j'aimerais que le 1er onglet soit actif pour chacune des annonces.

Une idée pour ça ?

Merci d'avance

Envoyé par Cécile le 04/07/2010 à 17:16:23

Bonjours, j'aimerais savoir comment mettre les onglets en bas plutôt qu'en haut. Merci d'avance.

Envoyé par Irish le 19/07/2010 à 22:47:02

est-il possible de mettre ce code sur un forum de forum actif?. si oui ou?

Merci d'avance

Envoyé par Gebeka le 05/08/2010 à 15:00:56

Merci pour ce tuto! j'ai pu intégré facilement les onglets dans mon site.

Envoyé par IRES le 26/10/2010 à 21:50:30

Je rencontre le même problème que IEIOI, à savoir qu'il est impossible d'insérer deux systèmes d'onglets qui fonctionnent correctement. J'ai fait plusieurs tentatives en modifiant le code mais sans résultats. Si quelqu'un connaît une astuce, merci de nous la communiquer.

Envoyé par SamC7 le 20/01/2011 à 11:10:25

Bonjour, ce tuto m'a, à de nombreuses reprises, aidé pour mes site et forum.
Cependant me voilà dans le cas où j'ai besoin d'insérer un autre système d'onglet dans ce système d'onglet... Mais impossible... quelqu'un aurait une idée ?

Envoyé par Meliane le 22/01/2011 à 13:09:15

J'adore votre tuto, il est genial et personalisable en plus ! Que demande le peuple :)
Par contre, j'aurais voulu savoir comment m'y prendre si je veux le mettre en vertiacale?
Il y a peu de chance que j'ai une reponse maintenant, mais comme on dit, qui ne tente rien :).

Envoyé par Cyllan le 04/02/2011 à 15:16:16

Merciiiiiiiiiiiiii ! Je vais enfin pouvoir faire une page d'accueil en onglets ! Merci mille fois \o/

Envoyé par Anolefa le 22/02/2011 à 14:21:31

thanck

Envoyé par Inko Nito le 24/02/2011 à 12:18:25

Tres bon code, simple et efficace - MERCI !!

Envoyé par razhen le 10/03/2011 à 18:53:44

+1, nice.

Envoyé par nanou2224 le 28/04/2011 à 09:57:20

merci pour ce code, que je vais mettre sous le coude, car ce n'est pas vraiment cela que je cherchais, mais cela peut me servir quand même
merci beaucoup

Envoyé par Drullthar le 09/05/2011 à 23:04:58

Un énorme merci pour ce code simple, astucieux et efficace !
Avec de bonnes images pour les onglets, ça devient vraiment à la fois pratique et esthétique !
Continue comme ça ybouane, je compte plus les fois ou SupportDuWeb m'a sorti d'une impasse !

Envoyé par jbedgy82 le 18/05/2011 à 15:10:49

Rapide, simple, efficace! J'arrive sur le site... j'y reste! Un grand merci.

Envoyé par amazigh97 le 18/06/2011 à 12:49:28

Slt,
Tout d'abord, très bon turoriel, très utile. Par contre, lorsqu'on ouvre la page, l'onglet "quoi" est deja ouvert. Et moi, je souhaite que lorsque l'on ouvre la page, aucun onglet n'est ouvert (sauf si l'on clique dessus). Aussi, je voulais demander si quelqu'un savait comment faire pour que lorsqu'on clique autre part dans la page ou sur le l'onglet ouvert, l'onglet actif se ferme.

MERCIIII !!!

Envoyé par aksoft le 13/09/2011 à 18:08:49

Bonjour, merci pour le tuto :)

peu tu me dire a quoi servent les classes : systeme_onglets, onglets et contenu_onglets ?

Merci :)

Envoyé par beli7706 le 21/12/2011 à 11:15:01

Salut
Merci pour ce bout de code. Il est super.
Beaucoup de courage à vous.

Envoyé par Sakura le 28/12/2011 à 15:40:30

Merci beaucoup !!!! =DD Sa aide énormement ! <3

Envoyé par xcsbhhia le 24/01/2012 à 12:30:03

Envoyé par Annick le 24/01/2012 à 16:42:21

SUPER!!
Et simple!
Merci

Envoyé par david le 25/01/2012 à 20:47:51

pas inscrit, mais j'ai trouver ce script simple et génial, l'explication est clair! Merci..