11540 sujets

JavaScript, DOM et API Web HTML5

[JQuery] Afficher un div par boutonS

Bonsoir,

je voudrais obtenir des avis et aides pour un problème de DIV "conditionnel".

Imaginons une page comprenant plusieurs éléments empilés.

Pour chaque élément, on a un bouton.
Ce bouton doit afficher une DIV (qui comprendra des photos par la suite).
Si on clique sur cette DIV, ça la referme.
Quand cette DIV est affichée, on ne peut cliquer nulle part ailleurs.


Problèmes:
- Pour le moment, les 2 boutons n'affichent que la DIV 'Contenu n°1'. Smiley ohwell
- Je voudrais que cette DIV soit centrée sur l'écran et pas intégrée dans la mise en page du reste du code HTML. (C'est probablement un problème de float ou position ?)

Merci,

Vincent

<!DOCTYPE html>
<html lang="fr">
	<head>
		<!-- #BeginEditable "content" -->
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<!-- #EndEditable -->
		
		<!-- #BeginEditable "title" -->
		<title>Test DIV clic</title>
		<!-- #EndEditable -->
		
		<!-- Head Scripts -->
		<script src="./js/jquery.js" type="text/javascript"></script>
		<script src="./js/jquery-json.js" type="text/javascript"></script>
		<script src="./js/jstorage.js" type="text/javascript"></script>
	
		
		<!-- CSS start -->
		<link href="reset.css" rel="stylesheet" type="text/css" />
		<link href="screen.css" rel="stylesheet" type="text/css" />
		<!-- CSS end -->
	</head>

	<body>
		<div id="root">
			<script type="text/javascript">
			function afficher()
			{
			
				if(document.getElementById("texte").style.visibility=="hidden")
				{
					document.getElementById("texte").style.visibility="visible";
				}
				else
				{
					document.getElementById("texte").style.visibility="hidden";
				}
				return true;
			}
			
			function fermer()
			{
				document.getElementById("texte").style.visibility="hidden";
				return true;
			}
			</script>
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			<button id="buttonToggleMenu" onclick="afficher();">Bouton 1</button>		

			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			<button id="buttonToggleMenu" onclick="afficher();">Bouton 2</button>		
			
			<div id="texte" onclick="fermer()" style="visibility: hidden;">Contenu n°1</div>
			<div id="texte" onclick="fermer()" style="visibility: hidden;">Contenu n°2</div>
		</div>
	</body>
</html>
Hello

C'est normal que ça n'affiche que la div n°1. Un id doit être unique. Ensuite je ne vois pas de jquery malgré le titre de ton post. Smiley lol

Voici un code simple (en jQuery) qui fonctionne pour les déclenchements de tes div, il faudra juste placer la div centrée en cachant le reste de la page.

<button id="btn1" class="bouton">Bouton 1</button>
<button id="btn2" class="bouton">Bouton 2</button>
<div id="img_btn1" class="image">Contenu n°1</div>
<div id="img_btn2" class="image">Contenu n°2</div>


.image {
    display:none;
}


$(".bouton").click(function() { 
    $("#img_" + $(this).attr("id")).toggle();
});
$(".image").click(function() {
    $(this).toggle();
});
Yop.

Merci, pour la réponse. Effectivement, durant les multiples tests, je suis passé de jQuery à rien ;p.

J'ai intégré tes modif'.
J'ai bien les boutons par contre, les évènements ne sont pas pris en compte. Ai-je mal implémenté le script ?

<!DOCTYPE html>
<html lang="fr">
	<head>
		<!-- #BeginEditable "content" -->
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<!-- #EndEditable -->
		
		<!-- #BeginEditable "title" -->
		<title>Test DIV clic</title>
		<!-- #EndEditable -->
		
		<!-- Head Scripts -->
		<script src="./js/jquery.js" type="text/javascript"></script>
		<script src="./js/jquery-json.js" type="text/javascript"></script>
		<script src="./js/jstorage.js" type="text/javascript"></script>
		<!-- Head Scripts -->
		
		<style type="text/css">
		.image {
			display:none;
		}
		</style>
		
		<script type="text/javascript">
		$(".bouton").click(function() { 
			$("#img_" + $(this).attr("id")).toggle();
		});
		
		$(".image").click(function() {
			$(this).toggle();
		});
		</script>
	</head>

	<body>
		<div id="root">
			<button id="btn1" class="bouton">Bouton 1</button>
			<button id="btn2" class="bouton">Bouton 2</button>
			<div id="img_btn1" class="image">Contenu n°1</div>
			<div id="img_btn2" class="image">Contenu n°2</div>

		</div>
	</body>
</html>
Salut

Il faut juste faire une petite modification sur le code jQuery pour t'assurer qu'il soit appliqué après que le DOM soit chargé :


$(function() {
	$(".bouton").click(function() { 
		$("#img_" + $(this).attr("id")).toggle();
	});
	
	$(".image").click(function() {
		$(this).toggle();
	});
});

Modifié par Oken (07 Feb 2013 - 11:18)
Sujet clos
Aller à