Bonjours,

mon problème est simple, j'ai une liste de lien sur une page, et je veux que lorsqu'on clique sur un different lien le texte de la page change.. j'ai reussi a faire deja quelque chose mais le probleme c'est que lorsque je clique sur 2 lien les deux s'affichent, dire que je voudrai que seulement un texte s'affiche a la fois.. voila mon code:

<div style="width: 600px; height: 300px; float: left">
<div style="width: 300px; height: 300px; float: left; padding: 5px">
<h1 style="text-align: center">Services</h1><br/><br/><br/>
<p>Sur cette page vous trouverez les différents services que je propose.</p><br/><br/>
<ul>
<li><a onclick="document.getElementById('creation').style.display='block' ">Création de sites web</a></li><br/>
<li><a onclick="document.getElementById('heberge').style.display='block'" href="javascript:;">Hébergement</a></li><br/>
<li><a href="#">Nom de domaine</a></li><br/>
<li><a href="#">Maintenance et mises à jour</a></li><br/>
<li><a href="#">Relooking</a></li><br/>
</ul>
</div>
<div style="width: 278px; height: 278px; float: left; padding: 5px;">
<div id="creation" style="padding: 5px; display: none;">
<h1 style="text-align: center">Création de sites web</h1><br/><br/><br/>
<p>C'est sans aucun doutes le point le plus important de mon travail, ...</p><br/><br/>
<a onclick="document.getElementById('creation').style.display='none'" href="javascript:;"> Fermer cette fenetre </a>
</div>
<div id="heberge" style="padding: 5px; display: none;">
<h1 style="text-align: center">Hébergement</h1><br/><br/><br/>
<p>C'est sans aucun doutes blalbalbalbalba, ...</p><br/><br/>
<a onclick="document.getElementById('heberge').style.display='none'" href="javascript:;"> Fermer cette fenetre </a>
</div>
</div>

voila. mes connaissances en javascript sont tres mauvaise....

merci de votre aide!

Marc

Salut,

Penses à utiliser les balises code pour afficher ton code.
Sinon, voilà ce que tu peux faire :

<div style="width: 600px; height: 300px; float: left">
<div style="width: 300px; height: 300px; float: left; padding: 5px">
<h1 style="text-align: center">Services</h1><br/><br/><br/>
<p>Sur cette page vous trouverez les différents services que je propose.</p><br/><br/>
<ul>
<li><a href="creation.html" onclick="document.getElementById('creation').style.display='block';document.getElementById('heberge').style.display='none';return false;">Création de sites web</a></li><br/>
<li><a href="hebergement.html" onclick="document.getElementById('heberge').style.display='block';document.getElementById('creation').style.display='none';return false;">Hébergement</a></li><br/>
<li><a href="#">Nom de domaine</a></li><br/>
<li><a href="#">Maintenance et mises à jour</a></li><br/>
<li><a href="#">Relooking</a></li><br/>
</ul>
</div>
<div style="width: 278px; height: 278px; float: left; padding: 5px;">
<div id="creation" style="padding: 5px; display: none;">
<h1 style="text-align: center">Création de sites web</h1><br/><br/><br/>
<p>C'est sans aucun doutes le point le plus important de mon travail, ...</p><br/><br/>
<a onclick="document.getElementById('creation').style.display='none'" href="#"> Fermer cette fenetre </a>
</div>
<div id="heberge" style="padding: 5px; display: none;">
<h1 style="text-align: center">Hébergement</h1><br/><br/><br/>
<p>C'est sans aucun doutes blalbalbalbalba, ...</p><br/><br/>
<a onclick="document.getElementById('heberge').style.display='none'" href="#"> Fermer cette fenetre </a>
</div>
</div>

Ton code était bon, il suffisait d'ajouter à la suite le code inverse pour masquer l'autre section.
Cependant, le mieux serait d'utiliser une fonction qui va afficher la div de la section correspondante tout en masquant les autres.

hey, merci beaucoup d'avoir repondu si vite!
j'ai donc essayé de le faire avec une fonction comme tu proposes, mais je n'y arrive pas.. est ce que tu sais ce que je fais de faut?

mon script est dans la balise head!

<script type="text/javascript">
		<!--
		   /* et vous pouvez placer votre code JS ici
		   sans etre inquiete par les vieux navigateurs */
			
			function text()
			{
				document.getElementById('p1').style.display='none';
				document.getElementById('p2').style.display='none';
				document.getElementById('p3').style.display='none';
				document.getElementById('p4').style.display='none';
				document.getElementById('p5').style.display='none';
			}
		//-->
		</script>


<div style="width: 600px; height: 300px; float: left">
	  			<div style="width: 300px; height: 300px; float: left; padding: 5px">
	  			<h1 style="text-align: center">Services</h1><br/><br/><br/>	
	  			<p>Sur cette page vous trouverez les différents services que je propose.</p><br/><br/>	
	  			<ul>
					<li><a href="#" onclick="javascript:text(); document.getElementById('p1').style.display='block';return false;">Création de sites web</a></li><br/>
					<li><a href="#" onclick="document.getElementById('p2').style.display='block';return false; ">Hébergement</a></li><br/>
					<li><a href="#" onclick="document.getElementById('p3').style.display='block';return false; ">Nom de domaine</a></li><br/>
					<li><a href="#" onclick="document.getElementById('p4').style.display='block';return false; ">Maintenance et mises à jour</a></li><br/>
					<li><a href="#" onclick="document.getElementById('p5').style.display='block';return false; ">Relooking</a></li><br/>
				</ul>
				</div>
				<div style="width: 278px; height: 278px; float: left; padding: 5px;">
									
				
				
					<div id="p1" style="padding: 5px; display: none;">
					      <h1 style="text-align: center">Création de sites web</h1><br/><br/><br/>
					      <p>C'est sans aucun doutes le point le plus important de mon travail, ...</p><br/><br/>
					<a onclick="document.getElementById('p1').style.display='none'"> Fermer cette fenetre </a>
					</div>
					<div id="p2" style="padding: 5px; display: none;">
					      <h1 style="text-align: center">Hébergement</h1><br/><br/><br/>
					      <p>C'est sans aucun doutes blalbalbalbalba, ...</p><br/><br/>
					<a onclick="document.getElementById('p2').style.display='none'"> Fermer cette fenetre </a>
					</div>
					<div id="p3" style="padding: 5px; display: none;">
					      <h1 style="text-align: center">Nom de domaine</h1><br/><br/><br/>
					      <p>C'est sans aucun doutes blalbalbalbalba, ...</p><br/><br/>
					<a onclick="document.getElementById('p3').style.display='none'"> Fermer cette fenetre </a>
					</div>
					<div id="p4" style="padding: 5px; display: none;">
					      <h1 style="text-align: center">Maintenance et mises à jour</h1><br/><br/><br/>
					      <p>C'est sans aucun doutes blalbalbalbalba, ...</p><br/><br/>
					<a onclick="document.getElementById('p4').style.display='none'"> Fermer cette fenetre </a>
					</div>
					<div id="p5" style="padding: 5px; display: none;">
					      <h1 style="text-align: center">Relooking</h1><br/><br/><br/>
					      <p>C'est sans aucun doutes blalbalbalbalba, ...</p><br/><br/>
					<a onclick="document.getElementById('p5').style.display='none'"> Fermer cette fenetre </a>
					</div>
					
				</div>

Merci bcp!!

Déjà, vire les "javascript:" (servent à rien)
Ensuite, tu pourrais plutôt faire une fonction genre :

function text(idAAfficher){
   for(var i = 0;i<5;i++){
//Si c'est le bon, tu affiches
      if(i == idAAfficher){
         document.getElementById("p"+i).style.display = 'block';
      }
//Sinon, tu le caches
      else{
         document.getElementById("p"+i).style.display = 'none';
      }
   }
return false;
}

Et la fonction tu l'appelles genre, pour afficher "p1", tu fais :

<a onclick="text(1);">afficher p1 et fermer tout le reste </a>