Javascript Girl
  1. Javascript Girl
  3. Onclick show div, mais cachez-vous quand l'autre est cliqué
Intereting Posts
SharePoint 2013 met à jour l'utilisateur en utilisant JavaScript Javascript: trier des objets Indiquez combien de caractères restants dans une zone de texte HTML utilisant JavaScript Passer des données à la base de données en utilisant javascript Onclick Comment puis-je compter les fichiers dans un répertoire en utilisant jQuery? TypeError: 'undefined' n'est pas une fonction (en évaluant 'mockBackend.expectPost ( Comment supprimer 'http: //' d'une URL en JavaScript Pourquoi la fonction de lien de ma directive n'est-elle jamais appelée? FullCalendar Custom / Override Header title Dans <div>, faites défiler jusqu'à la première occurrence d'une chaîne donnée JavaScript Number preserve leading 0 En utilisant le nombre "index" (JSON) Comment puis-je programmer la pagination bootstrap-3 pour fonctionner avec du contenu HTML simple Comment utiliser le plugin jQuery Validation avec les métadonnées, jQuery Forms et xVal ensemble? Pattern Singleton avec Browserify / CommonJS

Onclick show div, mais cachez-vous quand l'autre est cliqué

Je travaille avec le code de la réponse de ce sujet n ° 1 – " Afficher un div onclick et cacher l'image qui l'a déclenché " 

<img src="Icons/note_add.png" onclick="show('comment', this)"/> then the function would apply a "display none" to it: function show(target, trigger){ document.getElementById(target).style.display = 'block'; trigger.style.display = "none" }

Cela fonctionne très bien, mais j'ai 4 divs sur une page en utilisant cette fonction onclick. Lorsqu'un utilisateur clique sur l'image 1, div 1 apparaît, mais quand ils cliquent sur l'image 2 pour basculer div 2, div 1 est toujours visible.

Comment puis-je le faire pour que la div ouverte se ferme quand une autre est déclenchée pour montrer? Je veux seulement qu'un div soit ouvert sur une page, mais en ce moment, tous les 4 peuvent être ouverts.

MÉTHODE 1

Cela peut être simplifié avec le code jQuery .

EXEMPLE ICI

HTML 

 <img id="img1"/> <img id="img2"/> <div id="div1"/> <div id="div2"/> <div id="div3"/> <div id="div4"/>

JQUERY 

 $("#img1").on('click', function() { $(this).hide(); $("#div2, #div3, #div4").hide(); $("#div1").show(); });

Il suffit de remplacer Show / hide avec ce que vous souhaitez afficher ou cacher lorsque l'img est cliqué.

TOP TIP: Vous pouvez également remplacer show / hide avec toggle () ou fadeIn () / fadeOut ()

Toggle (): alternera entre le bloc d'affichage et ne affichera aucun avec chaque clic.

FadeIn (): fera de même que show () mais avec une belle animation de fondu.

MÉTHODE 2

La nouvelle façon d'utiliser les animations CSS . Les tests ont tendance à montrer que CSS est mieux sur la performance lors de la gestion des animations que jQuery.

EXEMPLE ICI

HTML 

 <div id="imgWrap"> <img id="img1" class="Active" data-box="div1"/> <img id="img2" data-box="div2"/> <img id="img3" data-box="div3"/> <img id="img4" data-box="div4"/> </div> <div id="divWrap"> <div id="div1" class="Active">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> </div>

CSS 

 #divWrap div{ opacity:0; } #divWrap .Active{ opacity:1; -webkit-animation:fadeIn ease-in-out 0.5s; animation:fadeIn ease-in-out 0.5s; } @-webkit-keyframes fadeIn{ from{opacity:0;} to {opacity:1;} } @keyframes fadeIn{ from{opacity:0;} to {opacity:1;} }

Ajouter l' display:none/block avec opacity (voir violoncelle) si vous ne souhaitez pas que l'élément réserve l'espace de la page lorsqu'il n'est pas visible.

La beauté de l'utilisation de css est que vous pouvez créer l'animation tout ce que vous voulez. Ce code déclenche simplement l'animation lorsque la classe Active est ajoutée à l'élément.

Voici quelques exemples d'animation .

JAVASCRIPT 

 $('img').on('click', function () { var divID = $(this).attr('data-box'); $(this).addClass('Active').siblings().removeClass('Active'); $('#' + divID).addClass('Active').siblings().removeClass('Active'); })

Enfin, ajoutez certains javascript ou jQuery comme ci-dessus pour ajouter la classe active en cliquant. Dans cet exemple, Active a été codé en dur sur un élément du html pour créer un élément actif par défaut sur le chargement de la page.

Ce code ajoute également Active au bouton cliqué. Ceci est facultatif mais peut être utilisé pour ajouter le style css au bouton actuellement actif. 

 var old_target,old_trigger; function show(target, trigger){ if(old_target!==undefined) document.getElementById(old_target).style.display = 'none'; if(old_trigger!==undefined) old_trigger.style.display = "block"; document.getElementById(target).style.display = 'block'; trigger.style.display = "none" old_target = target; old_trigger = trigger; }

Enregistrez simplement les références aux derniers clics / déclencheurs cliqués et changez les styles de ces anciennes références.

Je l'ai fait avec une division fixe. Voici les exemples de code. 

  <!DOCTYPE html> <html> <head> <script type="text/javascript" src="mc.js"></script> <link rel="stylesheet" type="text/css" href="mc.css"> </head> <body onload=hideAll('mydiv1')> <div id='mydiv1'><img src='img/1.jpg' alt="Image 1.jpg Not Found" height='300px' width='100%' />1</div> <div id='mydiv2'><img src='img/2.jpg' alt="Image 2.jpg Not Found" height='300px' width='100%' />2</div> <div id='mydiv3'><img src='img/3.jpg' alt="Image 3.jpg Not Found" height='300px' width='100%' />3</div> <div id='mydiv4'><img src='img/4.jpg' alt="Image 4.jpg Not Found" height='300px' width='100%' />4</div> <div id='mydiv5'><img src='img/5.jpg' alt="Image 5.jpg Not Found" height='300px' width='100%' />5</div> <div id='mydiv6'><img src='img/6.jpg' alt="Image 6.jpg Not Found" height='300px' width='100%' />6</div> <div id='mydiv7'><img src='img/7.jpg' alt="Image 7.jpg Not Found" height='300px' width='100%' />7</div> <div id='mydiv8'><img src='img/8.jpg' alt="Image 8.jpg Not Found" height='300px' width='100%' />8</div> <div id='mydiv9'><img src='img/9.jpg' alt="Image 9.jpgNot Found" height='300px' width='100%' />9</div> <div id='mydiv10'><img src='img/10.jpg' alt="Image 10.jpgNot Found" height='300px' width='100%' />10</div> <div id='mydiv11'><img src='img/11.jpg' alt="Image 11.jpgNot Found" height='300px' width='100%' />11</div> <div id='mydiv12'><img src='img/12.jpg' alt="Image 12.jpg Not Found" height='300px' width='100%' />12</div> <div id='mydiv13'><img src='img/13.jpg' alt="Image 13.jpg Not Found" height='300px' width='100%' />13</div> <div id='mydiv14'><img src='img/14.jpg' alt="Image 14.jpg Not Found" height='300px' width='100%' />14</div> <div id='mydiv15'><img src='img/15.jpg' alt="Image 15.jpg Not Found" height='300px' width='100%' />15</div> <div id='mydiv16'><img src='img/16.jpg' alt="Image 16.jpg Not Found" height='300px' width='100%' />16</div> <div id='mydiv17'><img src='img/17.jpg' alt="Image 17.jpg Not Found" height='300px' width='100%' />17</div> <div id='mydiv18'><img src='img/18.jpg' alt="Image 18.jpg Not Found" height='300px' width='100%' />18</div> <div id='mydiv19'><img src='img/19.jpg' alt="Image 19.jpg Not Found" height='300px' width='100%' />19</div> <div id="topMenu"> <button type="button" onclick="hideAll('mydiv1')">1</button> <button type="button" onclick="hideAll('mydiv2')">2</button> <button type="button" onclick="hideAll('mydiv3')">3</button> <button type="button" onclick="hideAll('mydiv4')">4</button> <button type="button" onclick="hideAll('mydiv5')">5</button> <button type="button" onclick="hideAll('mydiv6')">6</button> <button type="button" onclick="hideAll('mydiv7')">7</button> <button type="button" onclick="hideAll('mydiv8')">8</button> <button type="button" onclick="hideAll('mydiv9')">9</button> <button type="button" onclick="hideAll('mydiv10')">10</button> <button type="button" onclick="hideAll('mydiv11')">11</button> <button type="button" onclick="hideAll('mydiv12')">12</button> <button type="button" onclick="hideAll('mydiv13')">13</button> <button type="button" onclick="hideAll('mydiv14')">14</button> <button type="button" onclick="hideAll('mydiv15')">15</button> <button type="button" onclick="hideAll('mydiv16')">16</button> <button type="button" onclick="hideAll('mydiv17')">17</button> <button type="button" onclick="hideAll('mydiv18')">18</button> <button type="button" onclick="hideAll('mydiv19')">19</button> <button type="button" onclick="hideAll()">Hide All</button> <button type="button" onclick="showAll()">Show All</button> </div> </body> </html>

Le CSS est le suivant: Enregistrer sous mc.css 

  #topMenu { width: 100%; text-align: center; position: fixed; background-color: black; color: white; left: 0px; top: 0px; } div#mydiv1, div#mydiv2, div#mydiv3, div#mydiv4, div#mydiv5, div#mydiv6, div#mydiv7, div#mydiv8, div#mydiv9, div#mydiv10, div#mydiv11, div#mydiv12, div#mydiv13, div#mydiv14, div#mydiv15, div#mydiv16, div#mydiv17, div#mydiv18, div#mydiv19, div#mydiv20 { text-align:center; width: 600px; height: auto; position: fixed; left: 25%; top: 20px; } div>button { text-align: center; }

Javascript comme suit: save as mc.js 

  function hideAll(Adiv) { var text = ""; var i; for (i = 1; i < 20; i++) { var text = "" text += "mydiv" + i; document.getElementById(text).style.visibility = "hidden"; } document.getElementById(Adiv).style.visibility = "visible"; } function showAll(Adiv) { var text = ""; var i; for (i = 1; i < 20; i++) { var text = "" text += "mydiv" + i; document.getElementById(text).style.visibility = "visible"; } }

Évidemment, vous pouvez ajouter plus d'images et les placer dans la même zone que moi. le