Barre de navigation [débutant]

Le
1 connu
Bonjour,

Je suis débutant en JS et j'ai essayé de faire une barre de navigation dont l'aspect des boutons varient grâce à l'application
d'une classe CSS (selected).
Le bout de code html est le suivant :
<ul>
<li id="btnAcc" class="selected"><a href="Accueil.html" target="contenu" onClick='change_class(this)' >Accueil</a></li>
<li id="btnWeb" class=""><a href="Web.html" onClick='change_class(this)' target="contenu">Web</a></li>
</ul>
Le code JS suivant :
function change_class(theLink) {
var btnWeb = document.getElementById("btnWeb");
var btnAcc = document.getElementById("btnAcc");

if (theLink.parentNode == btnWeb)
{
btnAcc.className="";
btnWeb.className= "selected";
}
else if (theLink.parentNode == btnAcc)
{
btnAcc.className="selected";
btnWeb.className= "";
}
}

marche bien sur Firefox (je me suis aidé de FireBug pour trouver le champ parentNode).

Sur IE, ca ne marche pas du tout. Comment faire un code qui passe partout ?

D'avance merci pour toute aide.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
1 connu
Le #17912271
Sorry for the noise !
était juste une protection intempestive dans IE. Ca marche aussi bien un fois retirée.

"1 connu"
Bonjour,

Je suis débutant en JS et j'ai essayé de faire une barre de navigation dont l'aspect des boutons varient grâce à l'application
d'une classe CSS (selected).
Le bout de code html est le suivant :
<ul>
</ul>
Le code JS suivant :
function change_class(theLink) {
var btnWeb = document.getElementById("btnWeb");
var btnAcc = document.getElementById("btnAcc");

if (theLink.parentNode == btnWeb)
{
btnAcc.className="";
btnWeb.className= "selected";
}
else if (theLink.parentNode == btnAcc)
{
btnAcc.className="selected";
btnWeb.className= "";
}
}

marche bien sur Firefox (je me suis aidé de FireBug pour trouver le champ parentNode).

Sur IE, ca ne marche pas du tout. Comment faire un code qui passe partout ?

D'avance merci pour toute aide.






SAM
Le #17912381
Le 11/21/08 8:34 AM, 1 connu a écrit :
Bonjour,

Je suis débutant en JS et j'ai essayé de faire une barre de navigation dont l'aspect des boutons varient grâce à l'application
d'une classe CSS (selected).
Le bout de code html est le suivant :
<ul>
</ul>
Le code JS suivant :
function change_class(theLink) {
var btnWeb = document.getElementById("btnWeb");
var btnAcc = document.getElementById("btnAcc");

if (theLink.parentNode == btnWeb)
{
btnAcc.className="";
btnWeb.className= "selected";
}
else if (theLink.parentNode == btnAcc)
{
btnAcc.className="selected";
btnWeb.className= "";
}
}

marche bien sur Firefox (je me suis aidé de FireBug pour trouver le champ parentNode).



Il ne faut pas mettre : class=""
(ou il y a une class ou il n'y en a pas)


Et sans s'occuper des noms ?
(que va-ce donner quand le menu aura 10 items ?)

function change_class(theLink) {
// mettre tous les LI à blanc :
var menu = document.getElementsByTagName('LI'), n = menu.length;
for(var i=0; i<n; i++) menu[i].className = '';
// trouver le parent du lien (valable pour ta fonction itou) :
theLink = theLink.parentNode;
// s'assurer qu'on est remonté suffisament dans les parents :
while(theLink.tagName != 'LI') theLink = theLink.parentNode;
theLink.className = 'selected';
}


D'avance merci pour toute aide.



Il aurait été plus simple de tout faire sur le lien plutôt que sur son
parent.

a { display: block; background: #ffc; }
a:focus, a.selected { background: #ff0 }

var IEúlse; /*@cc_on IE=true; @*/ // est-ce IE ?
function menu(quoi) {
if(IE) {
var menu = document.getElementsByTagName('LI'), n = menu.length;
for(var i=0; i<n; i++) menu[i].className = '';
quoi.className = 'selected';
}
}

<li><a onclick="menu(this);"> bla bla ></li>


Il aurait été plus simple de ne pas passer par une page framée.
(l'affichage de la nouvelle page aurait le LI avec la bonne class ou
même le LI correspondant à la page n'aurait pas de lien et la même class
ferait pour tout le menu, donc ... même pas de class !)

--
sm
SAM
Le #17912631
Le 11/21/08 9:51 AM, 1 connu a écrit :
Sorry for the noise !
était juste une protection intempestive dans IE. Ca marche aussi bien un fois retirée.



Oui, c'était assez incompréhensible que ça ne fonctionne pas.

Néanmoins, essayer de généraliser la fonction (cf autre post)

--
sm
1 connu
Le #17912621
"SAM"
Le 11/21/08 9:51 AM, 1 connu a écrit :
Sorry for the noise !
était juste une protection intempestive dans IE. Ca marche aussi bien un fois retirée.



Oui, c'était assez incompréhensible que ça ne fonctionne pas.

Néanmoins, essayer de généraliser la fonction (cf autre post)

--
sm



Merci Sam pour ta fonction générique et tes conseils.
J'ai du boulot avant de maitriser tout ca ...
Publicité
Poster une réponse
Anonyme