changer couleur de lien parent

Sujet résolu

19 février 2010 à 16:28:10

Bonjour,

Je souhaite changer la couleur du lien parent.
Je m'explique:
j'ai une liste avec des sous listes.
Quand je clique sur un lien, le lien change de couleur (c'est normal).
J'aimerais que quand je clique sur un élément de la sous liste, que non seulement celui-ci change de couleur, mais que l'élément parent de la liste principale change aussi de couleur.
Mais j'ai une erreur

Voici mon code xhtml

<body>
	
	<ul id="menu">
		
		<li>
			<a class="major_li" href="#">Activity</a>
		</li>
		
		<li>
			<a class="major_li" href="#">Expertise</a>
			<ul>
				<li><a href="#" onmouseover="flag(1)" onmouseout="flag(0)">Operational Concept Definition</a></li>
				<li><a href="#" onmouseover="flag(1)" onmouseout="flag(0)">Operational Concept Validation</a></li>
				<li><a href="#" onmouseover="flag(1)" onmouseout="flag(0)">Cost Benefits Analysis</a></li>
			</ul>
		</li>
	<ul>
	
	</body>

mon code CSS

#menu a:hover
{
	color: orange;
}

et mon code javascript

function flag(type){

	var LiTab = document.getElementsByClassName(li);
	for (i = 0; i < LiTab.length; i += 1){	
		var GrandFather = LiTab[i].parentNode.parentNode;
		if( type == 1 ){	
			GrandFather.style.Color = "orange";
		}	
	}	
}

stephzero

22 février 2010 à 10:49:16

Tillertan

22 février 2010 à 11:46:31

<body>
	
	<ul id="menu">
		
		<li>
			<a class="major_li" href="#">Activity</a>
		</li>
		
		<li>
			<a class="major_li" href="#">Expertise</a>
			<ul>
				<li><a href="#" onmouseover="flag(this, 1)" onmouseout="flag(this, 0)">Operational Concept Definition</a></li>
				<li><a href="#" onmouseover="flag(this, 1)" onmouseout="flag(this, 0)">Operational Concept Validation</a></li>
				<li><a href="#" onmouseover="flag(this, 1)" onmouseout="flag(this, 0)">Cost Benefits Analysis</a></li>
			</ul>
		</li>
	<ul>
	
	</body>

function flag(elm, type){
	var gf = elm.parentNode.parentNode.parentNode.getElementsByTagName('a')[0];
	
	if( type == 1 ){	
		gf.style.Color = "orange";
	}
	else {	
		gf.style.Color = "black";
	}		
}

Essaies ça

Darkodam

22 février 2010 à 12:04:21

S'il y a plusieurs sous-listes dans la même liste, ton script ne va colorer que le premier lien Tiller :

function flag(elm, type){
	var ul = elm.parentNode.parentNode;
	var a = ul;
	
	while((a = a.previousSibling) && a.nodeType != 1);
	
	if(a) {
		if( type == 1 ){	
			a.style.color = "orange";
		}
		else {	
			a.style.color = "black";
		}
	}
}

Tillertan

22 février 2010 à 12:05:22

J'avais la flemme de jouer avec previousSibling :-°

Darkodam

22 février 2010 à 12:07:16

stephzero

24 février 2010 à 11:24:39

Merci beaucoup Darkodam et Tiller pour votre aide !

Trop sympa !