[Résolu] encore une histoire de montrer cacher - afficher la div souhaitée et masquer les x autres par french-petzouille - page 1

hello

soit page web
soit un menu fait avec des balise ul li et du css
soit des div ayant comme id "conteneur1" "conteneur2" "conteneur3" ...etc (le nombre est amené à croître ) .Les div par défaut sont masquées via la feuille de style ( display:none;)

but : un click sur un menu = cela affiche la div mentionnée dans l'évènement onclick="toggle(x);" et masque les autres.

voilà la page et surtout la function toggle ... qui ne marche pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title>Test</title>

<style type="text/css">
ul {
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none;
}

ul li {
	float: left;
	margin-left: 1px
}

ul li a {
	float: left;
	display: block;
	height: 36px;
	text-align: center;
	background: url('css/menu2_vert.gif') repeat-x top;
	color: #fff;
	font-size: 11px;
	padding: 5px 20px 0 20px;
	font-weight: bold;
	text-decoration: none;	
}

ul li a:hover {
	background-position: bottom;
	text-decoration: none;
	color:#fff;
}

#conteneur1, #conteneur2, #conteneur3 { display:none; border:1px ridge #000;}

</style>

<script type="text/javascript">
function toggle(id)
{
	var zone=document.getElementById('conteneur'+id);
	for(i=1;i<=3;i++)
	{
		if(zone.style.display =='none')
		{zone.style.display='block';}
		else if(zone.style.display =='block')
		{zone.style.display ='none';}
	}
}
</script>
	</head>
	<body>

	<div id="cont">
				<ul class="m3">
					<li><a href="#" onclick="toggle(1);">Mise à jour pour Studio 5</a></li>
					<li><a href="#" onclick="toggle(2);">Mise à jour pour Studio 4</a></li>
					<li><a href="#" onclick="toggle(3);">Mise à jour pour Studio 3</a></li>
				</ul>
	</div>
		<div id="conteneur1">
			<h1>Cette maj est spécifique a cette release 1...</h1>
		</div>
		<div id="conteneur2">
			<h1>Cette maj est spécifique a cette release 2...</h1>
		</div>
		<div id="conteneur3">
			<h1>Cette maj est spécifique à cette version 3...</h1>
		</div>
	</body>
</html>

Comment procéder avec la fonction toggle et pour avoir le moins de choses à changer quand mon menu prendra d'autres lignes ?

merci

french-petzouille

13 mars 2009 à 11:27:28

restimel

13 mars 2009 à 12:54:59

Bonjour,
je pense que ça correspond à ce que tu veux faire:

function toggle(id)
{
	var zone,i;
	for(i=1;i<=3;i++)
	{
		zone=document.getElementById('conteneur'+i);
		if(i==id)
		{zone.style.display='block';}
		else 
		{zone.style.display ='none';}
	}
}

voir même si tu ne veux pas utiliser zone pour autre chose (et que tu n'as pas besoin de vérifier que l'élément existe bien):

function toggle(id)
{
	for(var i=1;i<=3;i++)
	{
		if(i==id)
		{document.getElementById('conteneur'+i).style.display = 'block';}
		else 
		{document.getElementById('conteneur'+i).style.display = 'none';}
	}
}

13 mars 2009 à 13:41:31

Merci restimel
ca colle impecc

encore une histoire de montrer cacher

afficher la div souhaitée et masquer les x autres

encore une histoire de montrer cacher

Supprimer

Modérer

Signaler le message aux modérateurs