Afficher div et cacher les autres sur click

Fermé

Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 - Modifié par Melooo le 12/09/2011 à 16:09
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 - 13 sept. 2011 à 08:50

Bonjour,
J'ai 7 titres qui constitue un menu, lorsqu'on clique sur un des menus, un contenu s'affiche, mais quand je clic sur un autre menu il garde l'ancien en mémoire, or je voudrais supprimer l'ancien et me mettre le nouveau, mais pas moyen de trouver, merci de votre aide
ps : je souhaite si possible le faire en jquery

	<div class="menu" align="center" width="910px">
		<ul>
			<li onClick="vm();" id="vm" class="test"><a href="#" id="current">1</a></li>
			<li onClick="sto();" id="sto" class="test"><a href="#" id="current">2</a></li>
			<li onClick="outils();" id="outils" class="test"><a href="#" id="current">3</a></li>
			<li onClick="transf();" id="transf" class="test"><a href="#" id="current">4</a></li>		
			<li onClick="offre();" id="offre" class="test"><a href="#" id="current">5</a></li>			
			<li onClick="secu();" id="secu" class="test"><a href="#" id="current">Sécurité</a></li>
			<li onClick="certif();" id="certif" class="test"><a href="#" id="current">6</a></li>
		</ul>
	</div>

et voici par exemple si il clique sur 1 :

		<div class="test1">
			<table  border="0" align="center">
				<tr>
					<td><span class="accroche">M1</span></td>
					<p><td valign="middle"><span class="accroche2">texte du menu 1</span></td></p>
					<td valign="middle"><img src="images/prix-1.jpg"></td>
				</tr>
			</table>
		</div>

A voir également:

Afficher div et cacher les autres sur click
Cacher conversation whatsapp - Guide
Comment cacher les amis sur facebook - Guide
Afficher les dossiers cachés - Guide
Auto click - Télécharger - Divers Utilitaires
Afficher mot de passe wifi android - Guide

3 réponses

Réponse 1 / 3

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
12 sept. 2011 à 16:14

Un truc simple c'est d'utiliser la proprieté css

display: none

display: block

que tu associera un evenement onclick.

Réponse 2 / 3

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 12/09/2011 à 17:18

<script> 
function test1() { 
document.getElementById('div1').style.display='block' 
document.getElementById('div2').style.display='none' 
} 
function test2() { 
document.getElementById('div2').style.display='block' 
document.getElementById('div1').style.display='none' 
} 
</script> 
<div style="position:absolute"><a href="#" onclick="test1()">menu 1</a> 
</div> 
<div style="position:absolute;margin-left:350px"><a href="#"onclick="test2()">menu 2</a></div> 
<div id="div1" style="position:absolute;top:30px;background-color:red;width:200px;height:200px;display:none"> 

</div> 
<div id="div2" style="position:absolute;top:30px;margin-left:350px;background-color:navy;width:200px;height:200px;display:none"> 

</div>

test le code
est ce sa ressemble a sa?
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.

Réponse 3 / 3

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
12 sept. 2011 à 17:25

<script>
function test1() {
document.getElementById('div1').style.display='block'
document.getElementById('div2').style.display='none'
}
function test2() {
document.getElementById('div2').style.display='block'
document.getElementById('div1').style.display='none'
}
function test3() {
document.getElementById('div1').style.display='none'

}
function test4() {
document.getElementById('div2').style.display='none'
}
</script>
<div style="position:absolute"><a href="#" onclick="test1()">menu 1</a>
</div>
<div style="position:absolute;margin-left:350px"><a href="#"onclick="test2()">menu 2</a></div>
<div onmouseout="test3()" id="div1" style="position:absolute;top:30px;background-color:red;width:200px;height:200px;display:none">

</div>
<div onmouseout="test4()" id="div2" style="position:absolute;top:30px;margin-left:350px;background-color:navy;width:200px;height:200px;display:none">

</div>

j'ai rajouté un évènement lorsqu'on quitte la zone de la div, le menu disparait.

Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
13 sept. 2011 à 08:50

Merci, le code fonctionne, sauf que j'aurais pas mal de ligne de code étant donné que j'ai 7 menus, donc 7 lignes pour les 7 fonctions

Discussions similaires

Site de confiance ou non ?

Afficher toutes les lignes masquées excel

Retrouver l'image originale après avoir fait des modifications ?

Cacher les membres du groupe WhatsApp

Discussions similaires

Newsletters