Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1571 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Afficher/Masquer éléments DIV en javascript

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Afficher/Masquer éléments DIV en javascript

n°2245347
recep
Posté le 08-12-2014 à 16:28:59  profilanswer
 

Bonjour
 
J'utilise la méthode du code suivant pour afficher/masquer un éléments div sur ma page.
Maintenant j'aimerai pourvoir arriver sur cette page via un lien, par exemple lien d'une autre page qui pointerait sur le 1er éléments de ma liste (id=un) et qui activerai en même temps son contenu.
 
Est-ce faisable? Merci !
 
 

<script>
 var _hidediv = null;
 function showdiv(id) {
  if(_hidediv)
   _hidediv();
  var div = document.getElementById(id);
  div.style.display = 'block';
  _hidediv = function () { div.style.display = 'none'; };
 }
</script>
<div>  
    <div>
     <div>
            <h2>test</h2>
            <div id="un"><a onclick="showdiv('1er');" href="#">un</a></div>
            <div id="deux"><a onclick="showdiv('2em');" href="#">deux</a></div>
            <div id="trois"><a onclick="showdiv('3em');" href="#">trois</a></div>
            <div id="quatre"><a onclick="showdiv('4em');" href="#">quatre</a></div>
            <div id="cinq"><a onclick="showdiv('5em');" href="#">cinq</a></div>
        </div>
        <div>
            <div id="1er" style="display: none;">123</div>
            <div id="2em" style="display: none;">456</div>
            <div id="3em" style="display: none;">789</div>
            <div id="4em" style="display: none;">147</div>
            <div id="5em" style="display: none;">258</div>
         </div>
    </div>
</div>

mood
Publicité
Posté le 08-12-2014 à 16:28:59  profilanswer
 

n°2245349
MaybeEijOr​Not
but someone at least
Posté le 08-12-2014 à 16:34:07  profilanswer
 

Par PHP ou JS? Les deux sont possibles, juste qu'en JS faudra parser toi-même l'url.

Message cité 1 fois
n°2245352
recep
Posté le 08-12-2014 à 16:36:10  profilanswer
 

MaybeEijOrNot a écrit :

Par PHP ou JS? Les deux sont possibles, juste qu'en JS faudra parser toi-même l'url.


vous savez me montrer les 2 méthodes (php et js)?

n°2245367
torwood3
Posté le 08-12-2014 à 17:20:10  profilanswer
 

En PHP :
http://php.net/manual/fr/function.parse-url.php

Code :
  1. <?php
  2. var array = parse_url ( $_SERVER["REQUEST_URI"] );
  3. ?>
  4. <script>
  5. var _hidediv = null;
  6. function showdiv(id) {
  7.   if(_hidediv)
  8.    _hidediv();
  9.   var div = document.getElementById(id);
  10.   div.style.display = 'block';
  11.   _hidediv = function () { div.style.display = 'none'; };
  12. }
  13. </script>
  14. <div> 
  15.     <div>
  16.      <div>
  17.             <h2>test</h2>
  18.             <div id="un"><a onclick="showdiv('1er');" href="#">un</a></div>
  19.             <div id="deux"><a onclick="showdiv('2em');" href="#">deux</a></div>
  20.             <div id="trois"><a onclick="showdiv('3em');" href="#">trois</a></div>
  21.             <div id="quatre"><a onclick="showdiv('4em');" href="#">quatre</a></div>
  22.             <div id="cinq"><a onclick="showdiv('5em');" href="#">cinq</a></div>
  23.         </div>
  24.       <div>
  25.             <div id="1er" style="display: <?php echo (array["fragment"] == "1er" ? "block" : "none" ); ?> ;">123</div>
  26.             <div id="2em" style="display: <?php echo (array["fragment"] == "2em" ? "block" : "none" );;">456</div>
  27.             <div id="3em" style="display: <?php echo (array["fragment"] == "3em" ? "block" : "none" );;">789</div>
  28.             <div id="4em" style="display: <?php echo (array["fragment"] == "4em" ? "block" : "none" );;">147</div>
  29.             <div id="5em" style="display: <?php echo (array["fragment"] == "5em" ? "block" : "none" );;">258</div>
  30.         </div>
  31.     </div>
  32. </div>


 
En javascript :

Code :
  1. <script>
  2.     function parseURL(url) {
  3.         var parser = document.createElement('a'),
  4.             searchObject = {},
  5.             queries, split, i;
  6.         // Let the browser do the work
  7.         parser.href = url;
  8.         // Convert query string to object
  9.         queries = parser.search.replace(/^\?/, '').split('&');
  10.         for( i = 0; i < queries.length; i++ ) {
  11.             split = queries[i].split('=');
  12.             searchObject[split[0]] = split[1];
  13.         }
  14.         return {
  15.             protocol: parser.protocol,
  16.             host: parser.host,
  17.             hostname: parser.hostname,
  18.             port: parser.port,
  19.             pathname: parser.pathname,
  20.             search: parser.search,
  21.             searchObject: searchObject,
  22.             hash: parser.hash
  23.         };
  24.     }
  25. var _hidediv = null;
  26. function showdiv(id) {
  27.   if(_hidediv)
  28.    _hidediv();
  29.   var div = document.getElementById(id);
  30.   div.style.display = 'block';
  31.   _hidediv = function () { div.style.display = 'none'; };
  32. }
  34. showdiv ( parseURL(document.URL).hash );
  36. </script>


 
J'ai rien testé mais ca devrait etre ca


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
n°2245388
MaybeEijOr​Not
but someone at least
Posté le 08-12-2014 à 19:15:16  profilanswer
 

Oui ça devrait être bon, juste quelques erreurs de frappe dans la fermeture des balises de php. Autrement je pensais passer plus simplement par la variable $_GET.
 
 
Par contre du côté js pour afficher/cacher je te conseille de passer par des class css et au lieu de stocker l'état de l'objet dans une variable, tu ferais mieux d'interroger à chaque fois son état et d'appliquer son contraire.
 
 
 
exemple en js :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8"></meta>
  5.  <title>Page d'essai</title>
  6.  <style type="text/css">
  7.   .show {
  8.    display: block;
  9.   }
  10.   .hide {
  11.    display: none;
  12.   }
  13.  </style>
  14.  <script type="text/javascript">
  15.   function getQueryVariable(variable) {
  16.    var query = window.location.search.substring(1);
  17.    var vars = query.split("&" );
  18.    for (var i=0;i<vars.length;i++) {
  19.     var pair = vars[i].split("=" );
  20.     if (pair[0] == variable) {
  21.      return pair[1];
  22.     }
  23.    }
  24.   }
  25.   function ShowHide(id) {
  26.    if (id != '') {
  27.     var el = document.getElementById(id);
  28.     if (el.className == 'hide') {
  29.      el.className = 'show';
  30.     } else {
  31.      el.className = 'hide';
  32.     }
  33.    }
  34.   }
  35.  </script>
  36. </head>
  37. <body onLoad="ShowHide(getQueryVariable('id'));">
  38.  <a onClick="ShowHide('container');">click me</a>
  39.  <div class="hide" id="container">
  40.   test
  41.  </div>
  42. </body>
  43. </html>


Message édité par MaybeEijOrNot le 08-12-2014 à 19:38:39
n°2245445
recep
Posté le 09-12-2014 à 11:39:56  profilanswer
 

Merci pour vos réponses, je vais tester tout ça! :)

n°2245450
torwood3
Posté le 09-12-2014 à 11:48:24  profilanswer
 

Merci MaybeEijOrNot :)  
 
juste pour chippoter, on peut simplement definir une seul classe css.
.hide { display: none; }
 
et utiliser el.classList.toggle("hide" );
 
Mais bon, il y a d'autre amélioration a faire ^^'
 
So :

Code :
  1. <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.      <meta charset="UTF-8"></meta>
  5.      <title>Page d'essai</title>
  6.      <style type="text/css">
  7.       .hide {
  8.        display: none;
  9.       }
  10.      </style>
  11.      <script type="text/javascript">
  12.       function getQueryVariable(variable) {
  13.        var query = window.location.search.substring(1);
  14.        var vars = query.split("&" );
  15.        for (var i=0;i<vars.length;i++) {
  16.         var pair = vars[i].split("=" );
  17.         if (pair[0] == variable) {
  18.          return pair[1];
  19.         }
  20.        }
  21.       }
  23.       function ShowHide(id) {
  24.        if (id != '') {
  25.          document.getElementById(id).classList.toggle("hide" )';
  26.        }
  27.       }
  28.      </script>
  29.     </head>
  30.     <body onLoad="ShowHide(getQueryVariable('id'));">
  31.      <a onClick="ShowHide('container');">click me</a>
  32.      <div class="hide" id="container">
  33.       test
  34.      </div>
  35.     </body>
  36.     </html>


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
n°2245498
recep
Posté le 09-12-2014 à 14:49:40  profilanswer
 

Merci, finalement j'ai utilisé la variable $_GET
 
voici un des liens = "index.php?section=test&id=2em"
 

Code :
  1. <div>
  2.             <div id="1er" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "1er" ? "block" : "none" ); ?>;">123</div>
  3.             <div id="2em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "2em" ? "block" : "none" ); ?>;">456</div>
  4.             <div id="3em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "3em" ? "block" : "none" ); ?>;">789</div>
  5.             <div id="4em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "4em" ? "block" : "none" ); ?>;">147</div>
  6.             <div id="5em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "5em" ? "block" : "none" ); ?>;">258</div>
  7. </div>


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Afficher/Masquer éléments DIV en javascript

 

Sujets relatifs
Aide corriger javascript[Javascript - D3] Ajouter une variable de colorisation de flux
Cacher/Afficher en Javascript[RÉSOLU] Problème fenêtre modale et notifications
[Résolu][javascript/php] Executé sur pc mais pas sur mobilepause sur un click en javascript
Aide correctif pour javascript matrix sous ff[Excel] Afficher un bouton sous condition : Résolu
Comment créer un lien avec des éléments d'une base de données? 
Plus de sujets relatifs à : Afficher/Masquer éléments DIV en javascript

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.136 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR