Simplifier une (simple) fonction

Hello !
J'ai écrit ce code, mais je voudrais (et je suppose que cela est possible) le simplifier.
Comment faire ?

En gros; j'ai menu2_item1, menu2_item2, menu2_item3, menu2_item4.
Lorsqu'on survole un lien, on fait appelle à la fonction ShowContent, qui affiche le div correspondant et change la couleur du div contenant le lien.
Seulement ici je dois tous déclarer, je voudrais programmer quelque chose qui dit grosso modo que showcontent masque TOUT et met toutes les couleurs de fond à NOIR,; sauf pour l'id envoyé dans la fonction.

<script type="text/javascript" language="JavaScript">
<!--
function ShowContent(mondiv) {
	if(mondiv.length < 1) { return; }
	
	if (mondiv == 'menu2_item1') {
		document.getElementById('menu2_item1').style.display = "block";
		document.getElementById('menu1_item1').background = "#ff6600";
	} else {
		document.getElementById('menu2_item1').style.display = "none";
		document.getElementById('menu1_item1').background = "#000000";
	}
	
	if (mondiv == 'menu2_item2') {
		document.getElementById('menu2_item2').style.display = "block";
		document.getElementById('menu1_item2').background = "#cc0000";
	} else {
		document.getElementById('menu2_item2').style.display = "none";
		document.getElementById('menu1_item2').background = "#000000";
	}
	
	if (mondiv == 'menu2_item3') {
		document.getElementById('menu2_item3').style.display = "block";
		document.getElementById('menu1_item3').background = "#8b008b";
	} else {
		document.getElementById('menu2_item3').style.display = "none";
		document.getElementById('menu1_item3').background = '#000000';
	}
	
	if (mondiv == 'menu2_item4') {
		document.getElementById('menu2_item4').style.display = "block";
		document.getElementById('menu1_item4').background = "#330098";
	} else {
		document.getElementById('menu2_item4').style.display = "none";
		document.getElementById('menu1_item4').background = "#000000";
	}
}
//-->
</script>

Modifié par gordie (24 Oct 2007 - 16:15)

function ShowContent(divnum) {

var divcol1 = '#ff6600';
var divcol2 = '#cc0000';
var divcol3 = '#8b008b';
var divcol4 = '#330098';

	for (i=0; i<4;i++) {
		document.getElementById('menu2_item'+ i).style.display = "none";
		document.getElementById('menu1_item'+ i).background = "#000000";
	}
	document.getElementById('menu2_item' + divnum).style.display = "block";
	document.getElementById('menu1_item' + divnum).background = eval('divcol' + divnum);

}

Erreur : document.getElementById("menu2_item" + i) has no properties
Modifié par gordie (24 Oct 2007 - 16:34)

Tes items commence à 1, pas à zéro. Et ils finissent à 4, pas à 3, et on n'oublie pas 'var' :

for(var i = 1; i < 5; i++) {

:)

ceci fonctionne.
Maintenant je sais pas si il y a moyen de faire plus efficace, ou pas...

function ShowContent(divnum) {

var divcol1 = '#ff6600';
var divcol2 = '#cc0000';
var divcol3 = '#8b008b';
var divcol4 = '#330098';

	for (var i=1; i<5;i++) {
		document.getElementById('menu2_item'+ i).style.display = 'none';
		document.getElementById('menu1_item'+ i).style.background = '#000000';
	}
	document.getElementById('menu2_item' + divnum).style.display = 'block';
	document.getElementById('menu1_item' + divnum).style.background = eval('divcol' + divnum);

}