Afficher div et cacher les autres sur click
Melooo
Messages postés
1476
Statut
Membre
-
Melooo Messages postés 1476 Statut Membre -
Melooo Messages postés 1476 Statut Membre -
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
et voici par exemple si il clique sur 1 :
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
- Windows 11 afficher d'autres options - Guide
- Cacher ses amis sur facebook - Guide
- Afficher appdata - Guide
- Cacher son numéro - Guide
- Cacher conversation whatsapp - Guide
3 réponses
Un truc simple c'est d'utiliser la proprieté css
display: noneet
display: blockque tu associera un evenement onclick.
<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.
<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.
