Bonsoir les amis,
Je reviens vers vous ce soir, car le code ce n'est pas comme le vélo, ça s'oublie avec le temps :p
Dur de s'y remettre mais bon on fait aller ! J'ai cependant un petit souci avec un morceau de code ...
C'est trois fonctions qui vous sembleront très basique, afficher div, masquer div, et afficher / masquer div, et une quatrième pour masquer le tout.
J'utilise ça car j'ai besoin d'afficher certaines choses en survol (onmouseover), et d'autres en click (onclick)
Jusqu'ici ça fonctionne, je peux afficher en survol, et avec onmouseout ça disparait. Idem pour le afficher / masquer avec onclick.
Le tout fonctionne avec "display"
Mon problème est que je n'arrive pas à faire en sorte que ma fonction afficher / masquer (practice_hide_view) affiche un div à la fois, j'ai essayer de chercher sur mon meilleur ami pour trouver une réponse, alors peut être que je m'exprime mal, cela expliquerai pourquoi je n'ai pas eu de résultat .... :z
Tout fonctionne, mais je peux afficher div1_2 et div 2_ ... _5 en même temps alors qu'un seul à la fois serai le top (:
Voici un morceau mon code JavaScript ..
.. et mon html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 // JavaScript Document practice info hide + info view & info hide/view function practice_view(id) { document.getElementById(id).style.display = 'block'; } function practice_hide(id) { document.getElementById(id).style.display = 'none'; } function practice_hide_all_clicked_div() { document.getElementById('practice_div1_2').style.display = 'none' document.getElementById('practice_div2_2').style.display = 'none' document.getElementById('practice_div3_2').style.display = 'none' document.getElementById('practice_div4_2').style.display = 'none' document.getElementById('practice_div5_2').style.display = 'none'; } function practice_hide_view(id){ if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; document.getElementById('bouton_'+id); } else{ var alldiv = document.querySelectorAll('[id^="bloc"]'); for(var i=0; i< alldiv.length;i++) { alldiv[i].style.display = "none"; document.getElementById('bouton_bloc'+ i); } document.getElementById(id).style.display = "block"; document.getElementById('bouton_'+id); } }
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 <div id="liens"> <label onmouseover="practice_view('practice_div1')" onmouseout="practice_hide('practice_div1')" onclick="practice_hide_view('practice_div1_2')">Click ou survol 1</label><br /> -<br /> <label onmouseover="practice_view('practice_div2')" onmouseout="practice_hide('practice_div2')" onclick="practice_hide_view('practice_div2_2')">Click ou survol 2</label><br /> -<br /> <label onmouseover="practice_view('practice_div3')" onmouseout="practice_hide('practice_div3')" onclick="practice_hide_view('practice_div3_2')">Click ou survol 3</label><br /> -<br /> <label onmouseover="practice_view('practice_div4')" onmouseout="practice_hide('practice_div4')" onclick="practice_hide_view('practice_div4_2')">Click ou survol 4</label><br /> -<br /> <label onmouseover="practice_view('practice_div5')" onmouseout="practice_hide('practice_div5')" onclick="practice_hide_view('practice_div5_2')">Click ou survol 5</label><br /> -<br /> <label onclick="practice_hide_all_clicked_div()">Cacher tout ce qui est actif</label><br /><br /> </div> <div style="display:none" id="practice_div1">div 1 : survol</div> <div style="display:none" id="practice_div1_2">div 1_2 : click</div> <div style="display:none" id="practice_div2">div 2 : survol</div> <div style="display:none" id="practice_div2_2">div 2_2 : click</div> <div style="display:none" id="practice_div3">div 3 : survol</div> <div style="display:none" id="practice_div3_2">div 3_2 : click</div> <div style="display:none" id="practice_div4">div 4 : survol</div> <div style="display:none" id="practice_div4_2">div 4_2 : click</div> <div style="display:none" id="practice_div5">div 5 : survol</div> <div style="display:none" id="practice_div5_2">div 5_2 : click</div>
Merci pour votre temps
Partager