Javascript et html

[Résolu]
Signaler
Messages postés
110
Date d'inscription
lundi 27 mars 2006
Statut
Membre
Dernière intervention
21 octobre 2008
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Bonjour,

je voudrais savoir comment je peux ecrire une fonction javascript qui peut scruter les balises <li> de mon code html.

Voici le code

<

div id=
"header">

<ul>

<li id=
"current"><a href="javascript:;" onClick"document.all.bloc2.style.visibility 'visible';document.all.bloc1.style.visibility = 'hidden';" >Home
</a></li>

<li><a href=
"javascript:;" onClick=
"id='current';document.all.bloc1.style.visibility = 'visible';document.all.bloc2.style.visibility = 'hidden';" >News
</a></li>

<li><a href=
"#">Produits
</a></li>

<li><a href=
"#">A propos
</a></li>

<li><a href=
"#">Contact
</a></li>

</ul></

div><

div id=
"bloc1" style=
"color: #125345; visibility: hidden;">toto

</

div><

div id=
"bloc2" style=
"color: #120045;">titi

</

div>

En fait ce que je souhaite faire c'est changer la valeur du id=current lorsque je clique sur mes onglets et bien sur dévalider le current de l'onglet précédent.
Si quelqu'un peut m'aider à ecrire cela ça serait sympa.

MErci

3 réponses

Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
Pour scruter les balises <li> de ta page :

var lstLi = document.getElementsByTagName('li');
for (var i=0; i<lstLi.length; i++){
    var currentLi = lstLi[i];
    //A partir de là tu peut travailler sur currentLi
}

Pour acceder directement à un ta balise <li> 'current' :

var currentLi = document.getElementById('current');
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

    pas très bien compris....
    ce que tu veux, c'est cacher le div précédent et
       en afficher un nouveau en fonction du lien cliqué ?

    alors : ch'tit exemple...

<script type="text/javascript">
    var mem="1";
    function euh(a)
    {   document.getElementById('bloc'+mem).style.visibility = 'hidden';
        document.getElementById('bloc'+a).style.visibility = 'visible';
        mem=a;
    }
</script>

<li>[javascript:void(euh('1')); Home]</li>
<li>[javascript:void(euh('2')); News]</li>
<li>[# Produits]</li>
<li>[# A propos]</li>
<li>[# Contact]</li>

toto

titi

brut de fonderie...  car si ça ne correspond pas à ce que tu veux...
peut-être faudrait-il   mettre les appels à la fonction en dynamique,
                                    utiliser display="none" ou "inline"...

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
mais si tu veux explorer les LI, XTremDuke a proposé une approche possible.
( j'ai posté mon message sans avoir vu le sien )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />