Onglet supplémentaire

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Onglet supplémentaire

Message par tupac le Mar 19 Avr 2011 - 12:01

Bonjour

Mon problème consiste a rajouter plusieurs onglets a ce menu,j'ai bien essayé de le faire mais le contenu se place en colonne et lorsque je passe le curseur sur un onglet tout se met en place.

Le code html
Code:

<div id="mes_onglets">
<span id="o_1" class="mon_onglet" onMouseOver="changeOnglet(this);">Onglet 1</span>
<span id="o_2" class="mon_onglet" onMouseOver="changeOnglet(this);">Onglet 2</span></div>

<div id="mes_contenus">
<div id="co_1" class="mon_contenu">Contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Contenu 2</div>
</div>
le JavaScript
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }     
}


Dernière édition par tupac le Mar 19 Avr 2011 - 13:13, édité 1 fois

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet supplémentaire

Message par Invité le Mar 19 Avr 2011 - 12:13

Bonjour,

Pour rajouter des onglets, il faut ajouter 1 ligne dans la première partie du code, et une ligne dans la seconde.
Pour l'onglet en lui même la ligne est construite comme ceci:
<span id="o_X" class="mon_onglet" onMouseOver="changeOnglet(this);">Onglet X</span>
Remplacez X par le numéro de l'onglet.
Pour le contenu correspondant la ligne est construite comme ceci:
<div id="co_X" class="mon_contenu" style="display: none;">Contenu X</div>
Remplacez X par le numéro de l'onglet, là aussi. Normalement ça fonctionne.

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet supplémentaire

Message par tupac le Mar 19 Avr 2011 - 13:13

Bonjour Isolde

Ok
Au lieu de multiplier cette partie.
Code:
<div id="co_X" class="mon_contenu" style="display: none;">Contenu X</div>
Je multipliais celle-ci.
Code:
<div id="co_X" class="mon_contenu">Votre texte ici</div>

Merci Isolde

Bonne fin de journée.

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum