onclick liste imbriquées

Version imprimable

Bonjour,

J'ai un menu qui a des sous menus.

J'aimerai que la rubrique cliquée soit surlignée. Ma classe selected me sert à ça. Mais le problème est que si je clique sur un des sous lien du "lien 2", toute la rubrique du lien 2 reste surlignée alors que je voudrai que juste le sous lien le soit.

Pourriez vous m'aider ?

j'ai un code qui ressemble à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<ul>
	<li>titre
		<ul>
			<li id="mg1" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#" >lien 1</a></li>
 
 
			<li id="mg2" onclick="javascript:initMenuGauche();this.className='selected'">lien 2</a>
			<div id="sMenu1">
				<ul class="smenuGauche">
					<li id="mg3" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2</a></li>
 
					<li id="mg4" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-1</a></li>
					<li id="mg5" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-2</a></li>
					<li id="mg6" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-3</a></li>
					<li id="mg7" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-4</a></li>
				</ul>
			</div>
 
			</li>
			<li id="mg8" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#" >lien 3</a></li>
		</ul>
	</li>
</ul>

et la fonction initMenuGauche est la suivante :

Code:

1
2
3
4
5
6
7
8
9
10
 
function initMenuGauche() {
    // Initialisation des menus de gauche et de droite 
    for ( i=1 ; i<9 ; i++) {
		if (document.getElementById('mg'+i)) {
        	document.getElementById('mg'+i).className = '';
		}
    }
    return 0;
}

merci

04/09/2008, 17h23
le_chomeur

houla houla , des div a l'intérieur de li , puis des li ?
va faire un tour par ici :

http://css.developpez.com/galerie/
04/09/2008, 18h28
pop_up

On peut trés bien mettre des li dans des div et inversement et etant valide XHTML

le div me sert a cacher le sous menu en javascript dans certains cas.

Mais pour ce probleme, j'ai beau chercher, je vois pas.

bonjour,

ne mets pas le this.className sur les balises <li> mais sur les balises <a>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<li id="mg2" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">lien 2</a>
			<div id="sMenu1">
				<ul class="smenuGauche">
					<li id="mg3" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-0</a></li>
					<li id="mg4" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-1</a></li>
					<li id="mg5" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-2</a></li>
					<li id="mg6" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-3</a></li>
					<li id="mg7" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-4</a></li>
				</ul>
			</div>
 </li>

et supprime le terme javascript après tes événements onclick il est inutile.

04/09/2008, 21h16
pop_up

Effectivement c'est une solution. J'ai fait ce que tu m'as dit mais en laissant l'evenement onclick sur les li car c'est vraiment le <li> que je veux decorer car il est bien plus large que la balise <a>.

En tout cas c'est le moyen pour resoudre ce probleme.

merci

Citation:

c'est vraiment le <li> que je veux decorer car il est bien plus large que la balise <a>.

Dans ce cas tu peux utiliser cette méthode :

La balise <li> contient ta balise <div> tu comprends bien que si tu mets un fond sur ta balise <li>, le <div> aura le même fond sauf si le div n'a pas de fond transparent (style par défaut) ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <li id="mg2" onclick="initMenuGauche();this.className='selected'"><a href="#">lien 2</a> <div id="sMenu1" style="background-color: #FFFFFF"> <ul class="smenuGauche"> <li id="mg3" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-0</a></li> <li id="mg4" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-1</a></li> <li id="mg5" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-2</a></li> <li id="mg6" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-3</a></li> <li id="mg7" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-4</a></li> </ul> </div> </li>
dans cet exemple, le div a un fond blanc (tu peux mettre une autre couleur ou une image). Clique sur le lien parent, il aura l'aspect selected mais pas les <li> enfants car le <div> conteneur aura un fond blanc.