Forum d'entraide PHPFrance

bonjour tous

Ail petit prob dans mon javascript

J'essai de faire disparaitre les tableau quand je clique sur mes liens, si je clique sur le lien 1, j'ai bien mon tableau qui s'affiche.

Mais si je clique sur le lien 2, j'aurai toujours afficher le tableau du lien 1, autrement j'ai bien mon tableau pour le lien 2 s'affiche.

ail comprend plus

Petit demande aide si c'est possible

Merci

 <?php
echo "<div id=\"gotCode\">
			
			
<a href=\"#\" onclick=\"document.getElementById('dontGotCode').style.display = 'block';document.getElementById('gotCode').style.display = '';\">lien 1</a><br>

<a href=\"#\" onclick=\"document.getElementById('dontGotCode1').style.display = 'block';document.getElementById('gotCode').style.display = '';\">lien 2</a><br>

"; ?>
/////////////////////////////////////////////////////////////////

 <?php
echo "
<div id=\"dontGotCode\" style=\"display:none;\">
<table cellpadding=\"0\" cellspacing=\"0\" style=\"width:300px;border:0px solid #000080;\">
Tableau 1 du lien 1
</table></div>

<div id=\"dontGotCode1\" style=\"display:none;\">
<table cellpadding=\"0\" cellspacing=\"0\" style=\"width:300px;border:0px solid #000080;\">
Tableau 2 du lien 2
</table></div>
";	
?>

tu as une erreur dans la propriété envoyée pour masquer un élément : diplay = '' ne donnera rien, en revanche, display = 'none' va beaucoup mieux fonctionner.

Ceci dit, je suggères quelques amélioration :

Tu n'as nul besoin de mettre tout ça dans un echo() en PHP, ça fait travailler complètement inutilement l'interpréteur PHP, envoie ça directement en HTML;
simplifie ton code en créant une fonction que tu appelles depuis tes liens au lieu de mettre le code dans chaque lien;

Proposition de corrigé :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Afficher un élément et en masquer un autre</title>
<script type="text/javascript">
<!-- 
function masqueAffiche(taffiche, tmasque)
{
    document.getElementById(taffiche).style.display = 'block';
    document.getElementById(tmasque).style.display = 'none';
}
// -->
</script>
</head>
<body>
<div id="gotCode">
<a href="#" onclick="masqueAffiche('dontGotCode', 'gotCode');">lien 1</a><br>
<a href="#" onclick="masqueAffiche('dontGotCode1', 'gotCode');">lien 2</a><br>
</div>
<div id="dontGotCode" style="display:none;">
  <table cellpadding="0" cellspacing="0" style="width:300px;border:0px solid #000080;">
    <tr>
      <td>Tableau 1 du lien 1</td>
    </tr>
  </table>
</div>
<div id="dontGotCode1" style="display:none;">
  <table cellpadding="0" cellspacing="0" style="width:300px;border:0px solid #000080;">
    <tr>
      <td>Tableau 2 du lien 2</td>
    </tr>
  </table>
</div>
</body>
</html>

La fonction masqueAffiche reçoit deux paramètres ; en premier l'élément à afficher, et en second l'élément à masquer. Pas plus simple comme ça

Bonjour Cyrano

ail il est vrais que je me suis compliquer la vie

je vais faire comme tu le dis, merci beaucoup Cyrano

Ail ail

Après modif pour voir ce que cela pouvez donner, j'arrive au même point que ce que j'avais fait, mais bien sur ta soluce est beaucoup plus simple.

Mais la le problème est que si je clique sur le menu 1, le menu 2 ne reste pas afficher

Et ce que je veux c'est que justement les liens reste afficher

ben je n'ai que repris ton code et je l'ai juste optimisé: mais ce code contient une instruction pour faire disparaître le menu: retire l'instruction et vire dans ce cas le second paramètre, ou bien remplace un élément : en cliquant sur le premier lien, tu affiches le premier bloc et tu masques l'autre, et sur le lien 2 inverse :
Dans ce cas, ça donne la chose suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Afficher un élément et en masquer un autre</title>
<script type="text/javascript">
<!--
function masqueAffiche(taffiche, tmasque)
{
    document.getElementById(taffiche).style.display = 'block';
    document.getElementById(tmasque).style.display = 'none';
}
// -->
</script>
</head>
<body>
<div id="gotCode">
<a href="#" onclick="masqueAffiche('dontGotCode', 'dontGotCode1');">lien 1</a><br>
<a href="#" onclick="masqueAffiche('dontGotCode1', 'dontGotCode');">lien 2</a><br>
</div>
<div id="dontGotCode" style="display:none;">
  <table cellpadding="0" cellspacing="0" style="width:300px;border:0px solid #000080;">
    <tr>
      <td>Tableau 1 du lien 1</td>
    </tr>
  </table>
</div>
<div id="dontGotCode1" style="display:none;">
  <table cellpadding="0" cellspacing="0" style="width:300px;border:0px solid #000080;">
    <tr>
      <td>Tableau 2 du lien 2</td>
    </tr>
  </table>
</div>
</body>
</html>

On modifie juste les paramètres dans les appels de fonction des liens tout simplement.

A voila c'est exactement ce que je chercher a avoir, heureusement que vous êtes la les gars, mille merci Cyrano

Et vive PhpFrance

Il te reste à tagguer ça [Résolu]

Oui c'est sur, par contre si je rajoute un tableau 3 et lien 3, ça doi me donner ceci non ?

<a href="#" onclick="masqueAffiche('dontGotCode', 'dontGotCode1', 'dontGotCode2');">lien 1</a><br>
<a href="#" onclick="masqueAffiche('dontGotCode1', 'dontGotCode', 'dontGotCode2');">lien 2</a><br>
<a href="#" onclick="masqueAffiche('dontGotCode2', 'dontGotCode1', 'dontGotCode');">lien 3</a><br>

Je t'ai montré un chemin, maintenant, sois logique : tu peux séparer ta fonction en deux : une masquer(tmasquer) et une afficher(tafficher) : dans ton gestionnaire d'évènement, il te restera à appeler l'une et/ou l'autre

Bonsoir Cyrano

Ok j'avais pas compris la fonction exact, tout fonctionne maintenant merci Cyrano

Forum d'entraide PHPFrance

id /affichage du tableau ok, mais ne disparai pas sur lien 2

id /affichage du tableau ok, mais ne disparai pas sur lien 2