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 ?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 connu
Sorry for the noise ! était juste une protection intempestive dans IE. Ca marche aussi bien un fois retirée.
"1 connu" a écrit dans le message de news: 94eef$49266475$55da11f5$
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.
Sorry for the noise !
était juste une protection intempestive dans IE. Ca marche aussi bien un fois retirée.
"1 connu" <inconnue@bluewin.ch> a écrit dans le message de news: 94eef$49266475$55da11f5$5469@news.hispeed.ch...
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 ?
Sorry for the noise ! était juste une protection intempestive dans IE. Ca marche aussi bien un fois retirée.
"1 connu" a écrit dans le message de news: 94eef$49266475$55da11f5$
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.
SAM
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> <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).
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.
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
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>
<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).
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.
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 !)
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).
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.
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 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
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)
