Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

tupac
Membre actif

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

http://codactif.monalliance.com/
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.
avatar

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.
avatar

tupac
Membre actif

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

http://codactif.monalliance.com/
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