Flèche changeant une page

par xCRY Mar 16 Avr 2013 - 22:50

Bonjour, Bonsoir ou... Bon Appetit? xD

Bon je ne suis pas très très bonne en explication, mais je vais essayer:
Je voudrais en faites faire une page et autour deux flèches, et quand on clique sur une flèche, que le tableau change..
Je sais, l'explication est nul, donc je vais expliquer en image:

Et dès qu'on clique sur la flèche 1 ça donne ça:

Et qu'on on clique sur la flèche 2, ça nous fait revenir vers le tableau 1..

J'espère que j'ai été assez claire dans mes explications, et désolé du dérangement! J'ai cherchée partout mais j'ai jamais trouvée.. Embarassed

par xCRY Mer 17 Avr 2013 - 23:29

Uuuuuup? ;-;

par xCRY Ven 19 Avr 2013 - 13:22

Re Up? ;-;

par Arlem Ven 19 Avr 2013 - 14:43

Bonjour,

Que souhaiterais-tu mettre dans ton tableau ?

Tu peux essayer avec ce code, à mettre où tu souhaites que le tableau apparaisse :

Code:: <img src="url_fleche_2" id="fleche2"><div id="switch_table" style="display:inline;">Contenu par défaut du tableau</div><img src="url_fleche_1" id="fleche1">

En remplaçant les url de tes deux flèches et le contenu par défaut (donc du tableau 1 j'imagine).
Puis dans la gestion des codes javascript, créé en un nouveau, sélectionne la case "actif sur" en fonction de où tu mets le tableau et mets ceci comme code :

Code:: $(function() { $('#fleche2').click(function() { $('#switch_table').html('Contenu du tableau 2'); }); $('#fleche1').click(function() { $('#switch_table').html('Contenu par défaut du tableau'); }); });

Remplace dans ce code le contenu du tableau par défaut (tableau 1) et du tableau 2. Si dans ce code tu as des apostrophes à mettre, fais les précéder d'un anti-slash comme ceci : \' sinon ça fera tout planter. :3

par xCRY Ven 19 Avr 2013 - 15:27

Merci beaucoup c'est exactement ça!
En faites, c'est pour une P.A que je fais ça, mais j'ai encore une question, comment fait-on pour rajouter un troisième tableau?

par xCRY Lun 22 Avr 2013 - 1:39

Again Up?

par mambo54321 Lun 22 Avr 2013 - 2:48

J'aurais bien aimer t'aider avec son code mais je m'y connait pas beaucoup en php.
Par contre je pourrait te donner un code en script qui est un peut plus façil à comprendre.

1: Voila le code:

Code:: <body onload="showhide1(d1);"> <script type="text/javascript"> function hide(){ d1.style.display = 'none', d2.style.display = 'none', d3.style.display = 'none', d4.style.display = 'none', d5.style.display = 'none'; } function showhide1() { document.getElementById(d1); if(d1.style.display == 'block') hide(); else d1.style.display = 'block', d2.style.display = 'none', d3.style.display = 'none', d4.style.display = 'none', d5.style.display = 'none'; } function showhide2() { document.getElementById(d2); if(d2.style.display == 'block') hide(); else d1.style.display = 'none', d2.style.display = 'block', d3.style.display = 'none', d4.style.display = 'none', d5.style.display = 'none'; } function showhide3() { document.getElementById(d3); if(d3.style.display == 'block') hide(); else d1.style.display = 'none', d2.style.display = 'none', d3.style.display = 'block', d4.style.display = 'none', d5.style.display = 'none'; } function showhide4() { document.getElementById(d4); if(d4.style.display == 'block') hide(); else d1.style.display = 'none', d2.style.display = 'none', d3.style.display = 'none', d4.style.display = 'block', d5.style.display = 'none'; } function showhide5() { document.getElementById(d5); if(d5.style.display == 'block') hide(); else d1.style.display = 'none', d2.style.display = 'none', d3.style.display = 'none', d4.style.display = 'none', d5.style.display = 'block'; } </script> <center>  <div id="d1" class="dropContent1" style="display:none;"> <table cellspacing="0" cellpadding="0" width="100%" border="2"> <tr> <td width="10%"></td> <td width="80%"> TEXT 1. </td> <td width="10%"><a href="#" onclick="showhide2(d2);">2</a></td> </tr> </table> </div>  <div id="d2" class="dropContent1" style="display:none;"> <table cellspacing="0" cellpadding="0" width="100%" border="2"> <tr> <td width="10%"><a href="#" onclick="showhide1(d1);">1</a></td> <td width="80%"> TEXT 2. </td> <td width="10%"><a href="#" onclick="showhide3(d3);">3</a></td> </tr> </table> </div>  <div id="d3" class="dropContent1" style="display:none;"> <table cellspacing="0" cellpadding="0" width="100%" border="2"> <tr> <td width="10%"><a href="#" onclick="showhide2(d2);">2</a></td> <td width="80%"> TEXT 3. </td> <td width="10%"><a href="#" onclick="showhide4(d4);">4</a></td> </tr> </table> </div>  <div id="d4" class="dropContent1" style="display:none;"> <table cellspacing="0" cellpadding="0" width="100%" border="2"> <tr> <td width="10%"><a href="#" onclick="showhide3(d3);">3</a></td> <td width="80%"> TEXT 4. </td> <td width="10%"><a href="#" onclick="showhide5(d5);">5</a></td> </tr> </table> </div>  <div id="d5" class="dropContent1" style="display:none;"> <table cellspacing="0" cellpadding="0" width="100%" border="2"> <tr> <td width="10%"><a href="#" onclick="showhide4(d4);">4</a></td> <td width="80%"> TEXT 5. </td> <td width="10%"></td> </tr> </table> </div> </center> </body>