Afficher/Masquer DIV [correction]
Résolu/Fermé
nabmoah
-
14 août 2018 à 12:46
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 14 août 2018 à 15:44
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 14 août 2018 à 15:44
A voir également:
- Afficher/masquer div javascript onclick
- Onclick javascript - Astuces et Solutions
- Telecharger javascript - Télécharger - Langages
- Masquer conversation whatsapp - Guide
- Javascript round ✓ - Forum Javascript
- Afficher un tableau en c - Forum C
1 réponse
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
14 août 2018 à 13:13
14 août 2018 à 13:13
Bonjour,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>TEST</title>
<style>
divhideshow{
border-style: solid;
border-width: 2px;
min-heigth:80px;
min-width:200px;
display:block;
}
</style>
</head>
<body>
<div id="ID1" class="divhideshow">
CONTENU DE LA 1ère DIV<br><br>
<a onclick="visibilite('ID2');" href="#">aller vers la 2ème div</a>
</div>
<div id="ID2" class="divhideshow">CONTENU DE LA 2ème DIV<br><br>
<a onclick="visibilite('ID1');" href="#">revenir vers la première div</a>
</div>
<script type="text/javascript">
function visibilite(idDiv){
//on masque toutes les div ayant la class
hideByClassName('divhideshow');
//on affiche la div qui nous interesse
document.getElementById(idDiv).style.display = "block";
}
function hideByClassName(clName){
//boucle sur tous les élements de la page ayant la class "clName"
[].forEach.call(document.querySelectorAll('.' + clName), function (el) {
el.style.display = 'none';
});
}
//par défaut, on affiche la première div
visibilite("ID1");
</script>
</body>
</html>
14 août 2018 à 14:30
Merci beaucoup Jordane45 ça marche :)
C'est la deuxième fois que tu viens en mon aide et c'est toujours un plaisir de te revoir :)
Merci encore :)
14 août 2018 à 15:26
y a t'il un moyen de le faire en Jquery ?
Car avec JS, si ma page est longue, une fois que je clique sur le lien pour changer de div, ça marche, mais la page remonte tout en haut, et donc il faut redescendre au niveau de la partie où se situe les DIV
enfin c'est juste une question :)
14 août 2018 à 15:44
function visibilite(idDiv){ //on masque toutes les div ayant la class $('.divhideshow').hide(); //on affiche la div qui nous interesse $('#'+idDiv).show(); } visibilite("ID1");mais en réalité.. le retour en haut est provoqué par le fait que tu utilises des liens '<a href...'
A la place, utilises un <button> ou tout autre élément html comme un <span> par exemple....