Discussion :

[nicoaix]

Bonjour,
Dans le cadre d'un menu pour un site web, j'ai plusieurs éléments dans ce menu.
Ce menu est constitué par une liste (<ul><li>...</li></ul>)
Par exemple:
Accueil | Menu1 | Menu2
Ce que je souhaite c'est appliquer un style lors du clic sur un élément. Pour cela j'ai une class 'item_active' qui doit s'appliquer à l'élément cliqué. Le problème c'est de supprimer cette classe lors du clic sur un autre élément. Je souhaite donc à chaque clic supprimer la class de tous les éléments de ma liste (<li></li>) et l'ajouter à l'élément qui a été cliqué.

Comment faire pour supprimer la class 'item_active' de tous les éléments <li></li>?

J'ai essayé ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function apply_class(e){
	document.getElementByClassName('item_active').className = '';
	if(e.className == ''){
		e.className='item_active';
	}
}

Avec un appel à cette fonction dans chaque <li></li>:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li onclick="apply_class(this)"><a href="#"><span>Accueil</span></a></li>

Ca supprime bien le style mais ça ne garde pas le style de ma classe 'item_active'.

[tusssss]

Je crois que getElementByClassName n'existe pas.

Et pourtant d'après ce que tu décris c'est la partie qui fonctionne...

[Matthieu2000]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(e.className )

?

[nicoaix]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(e.className )

?

?
e.className renvoit le nom de l'élément 'e' passé en paramètre de la fonction.

//

getElementByClassName n'existe pas effectivement de manière native dans javascript (mais une implémentation de cette fonction existe).

[SpaceFrog]

il suffit d'aller voir dasn les contributions ou même je crois dasn le postit sur les librairies, il me semble que Le_Chomeur à posté une focntin getElementByClassName ...

[tusssss]

Le plus simple finalement resterait que tu crée 2 classes, crée une classe item inactive, et tu risques de passer les problemes de ton code, enfin rien de vraiment certain la dedans.

[nicoaix]

J'ai trouvé: Voici la fonction que j'utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function apply_class(e){
//Récupération de tous les éléments (des listes) de type 'li'
	var li = document.getElementsByTagName('li');
	for(var i=0; i< li.length-1; i++){
		li[i].className = '';//Application d'un nom de classe vide à chaque élément
	}
//A la fin de la boucle:application de la classe active sur l'élément cliqué
	e.className = 'item_active';
}

Merci à tous pour votre contribution.