11550 sujets

JavaScript, DOM et API Web HTML5

[RESOLU][Javascript] Afficher et cacher du texte avec plusieurs liens.

Bonjour,

J'ai un problème au niveau de liens contenu dans un bloc.

Ce que je cherche à faire :

Je possède un bloc, dans ce bloc, j'affiche trois liens relativement espacés entre-eux.
Quand je clique sur un lien, un texte s'affiche en dessous ce de dernier, et, quand je clique sur un autre lien, le texte affiché se cache pour laisser la place à l'autre texte du second lien.

Malheureusement, avec le code ci-dessous, je n'arrive pas à reproduire exactement ce que je recherche.

Voici le code XHTML/PHP :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>Bienvenue sur mon site !</title>
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
	<script type="text/javascript">
		function	show(divDest)
		{
			showDiv = document.getElementById(divDest);
			if (showDiv.style.display == 'block')
				showDiv.style.display = 'none'
			else
				showDiv.style.display = 'block';
		}
		</script>
</head>
<body>
   
		<div id="page">
				<div class="test_bloc">
				<h2>Liens de test</h2>
					<ul class="liens_bloc">
						<li><a href="#" title="liens de test" class="test_1" onclick="show('reponse_1');">Test</a>
						<span style="display: none; text-align: justify;" id="reponse_1" onclick="hidden(this);">
						<?php $texte_1 = 'blablablablablablablablablablablablablablablablablablablablabla.
						blablablablablablablablablablablablablablablablablablablablabla.
						blablablablablablablablablablablablablablablablablablablablabla.'; 
						$texte_1 = nl2br($texte_1); 
						echo $texte_1; ?>
						</span></li>
						<li><a href="#" title="liens de test" class="test_2" onclick="show('reponse_2');">Test</a>
						<span style="display: none; text-align: justify;" id="reponse_2" onclick="hidden(this);">
						<?php $texte_2 = 'blablablablablablablablablablablablablablablablablablablablabla.
						blablablablablablablablablablablablablablablablablablablablabla.
						blablablablablablablablablablablablablablablablablablablablabla.'; 
						$texte_2 = nl2br($texte_2); 
						echo $texte_2; ?>
						</span></li>
						<li><a href="#" title="liens de test" class="test_3" onclick="show('reponse_3');">Test</a>
						<span style="display: none; text-align: justify;" id="reponse_3" onclick="hidden(this);">
						<?php $texte_3 = 'blablablablablablablablablablablablablablablablablablablablabla.
						blablablablablablablablablablablablablablablablablablablablabla.
						blablablablablablablablablablablablablablablablablablablablabla.'; 
						$texte_3 = nl2br($texte_3); 
						echo $texte_3; ?>
						</span></li>
					</ul>
				</div>
			
		</div>
   
</body>
</html>


Et maintenant le code CSS :


/* CSS by jQz */

#page {
	width: 900px;
	height: 500px;
	margin: 0 auto;
	background-color: #949494;
	border: 4px solid #646464;
}
	
.test_bloc {
	width: 500px;
	height: 300px;
	border: 2px solid #545454;
	background-color: #848484;
	margin: 20px auto 0px auto;
}

ul.liens_bloc li{
	list-style-type: none;
	display: inline;
	padding: 25px;
}

h2 {
	border-bottom: 2px solid #747474;
}


Si vous cliquez sur le premier lien test, le texte ( qui n'est pas très instructif Smiley langue ) s'affiche au bon endroit.

Néanmoins, si vous cliquez sur le deuxième lien, le texte s'affiche en dessous du texte du seconde lien, or je voudrais que le premier texte s'efface pour laisser place au second.

Je suppose que je peux régler ce problème avec du JavasScript mais comment ?

En espérant que vous ayez compris ce que je chercher à faire.

Cordialement
jQz.

EDIT : J'ai modifié l'affichage de mon code, dites moi si c'est mieux.
Modifié par jQz (11 Jul 2009 - 13:41)
Salut,

tu pourrais simplement commencer par masquer tous les éléments span, puis afficher celui qui t'intéresse.
Salut,

1) Si tu testes le code que tu as donné , tu verras que lorsqu'on clique sur le premier lien, aucun texte n'apparait car le span est vide (l'as-tu oublié ou est-ce la faute des travaux sur la coloration syntaxique ?)

2) Si on corrige et qu'on remplit le span dans le code, le texte apparait mais vraque ton layout car tu affiches les liens en "block". Il vaudrait mieux gérer l'affiche/masquage ainsi :
if (showDiv.style.display != 'none')
    showDiv.style.display = 'none';
else 
    showDiv.style.display = '';
3) La solution proposée par N-J est la plus couramment utilisée. Si tu n'as pas de besoins spécifiques, elle devrait parfaitement faire l'affaire.
Bonsoir N-J et marcv, merci de m'avoir répondu,

N-J, pourrais-tu me montrer un exemple s'il te plaît ?

marcv, oui je pense que c'est la colorisation syntaxique du code qui l'a modifié...
Je vais y remédier tout de suite.

Quand à te méthode pour cacher/montrer le texte, je l'ai testé et le texte ne s'affiche plus du tout Smiley confus .
jQz a écrit :
Quand à te méthode pour cacher/montrer le texte, je l'ai testé et le texte ne s'affiche plus du tout Smiley confus .
C'est très surprenant. Je te conseille de mettre ta page en ligne pour qu'on soit tous sûrs d'avoir le même code (complet).
Voilà, page mit en ligne sur mon site à cette adresse ou en cliquant sur le lien jQz test depuis la page d'accueil de mon site.

Pour information, j'ai mit le code JavaScript qui fonctionne.

Es-ce que le code de mon premier post est plus lisible ou pas ? Vois-tu le code PHP ?
Modifié par jQz (10 Jul 2009 - 21:52)
OK, c'est toujours beaucoup plus clair avec une page en ligne. Voici donc une proposition de solution :
function show(divDest) {
    // on cache tous les spans
    var spans = document.getElementById('page')
                        .getElementsByTagName('span');
    for (var i=0, l=spans.length; i<l; i++) {
        spans[[#000]i].style.display = 'none';
    }
    // on affiche le span demandé
    var showDiv = document.getElementById(divDest);
    showDiv.style.display = 'block';
}
Comme je te le disais plus haut, ça fait toujours partir ton layout en vrille (à moins que ce soit voulu, mais j'en doute). Tu règleras donc tes CSS comme tu voudras.
Merci marcv ça marche.

Néanmoins, je voudrais savoir si il s'avère possible de faire ceci :

Lorsque je clique sur le premier lien "test", ça affiche un texte "blablaba..." et, si je reclique sur le premier lien "test", ça cache le texte blablabla autrement dit, le texte que le lien activé affiche ?
À chaque fois, la fonction masque tous les spans sans chercher à comprendre. Il te suffit donc de n'afficher ensuite ton span que s'il était déjà masqué avant : 
function show(targetId) {
    var target = document.getElementById(targetId);
    var targetWasHidden = (target.style.display == 'none');
    // on cache tout
    var spans = document.getElementById('page').getElementsByTagName('span');
    for (var i=0, l=spans.length; i<l; i++) {
        spans[[#000]i].style.display = 'none';
    }
    // on affiche span#targetId s'il était masqué
    if (targetWasHidden) {
        target.style.display = 'block';
    }
}
(j'ai changé le nom de la variable showDiv par target, qui a plus de sens)
Sujet clos
Aller à