afficher un div et cacher tous les autres

**maysa** · 09/07/2009, 12h14

Bonjour,

j'ai un div menu,
j'aimerais que quand je clique sur un onglet,ça m'affiche le div sousMenu correspondant.
tous mes div sous menu sont en style display none; donc déjà chargé,
j'arrive bien à faire on mouseover : affiche le div, mais quand je vais sur un autre div, le div précédent est toujours afficher et j'ai donc deux div qui s'affichent puis deux , puis 3...

y'a t-il une technique de dire, affiche le sousMenu qui correspond et cache tous les autres sans avoir a les nommer tous ?
mes sousMenus se nomment sousMenu1 , sousMenu2, sousMenu3 ect...

Merci pour votre aide .

**franculo_caoulene** · 09/07/2009, 12h35

Salut,

La technique est en fait de cacher tous les sous-menus pour ensuite n'afficher que el sous-menu courant. Il y a plusieurs façon de trouver ces éléments. L'une d'elle est d'utiliser getElementsByTagName depuis son parent (un élément ayant pour identifiant "menu", par exemple).

**SpaceFrog** · 09/07/2009, 13h01

oui ou avec un truc comme ça :
http://www.developpez.net/forums/d75...filtre-regexp/

**maysa** · 09/07/2009, 13h48

Merci à vous deux.
Bon dans l'esprit, j'ai bien compris. Mais c'est la façon de le faire.
utiliser getElementByName, ne changerait rien à mon pb, car onMouseOver getElement ok, mais quand je quitte et que je vais sur un autre onglet, mon ancien div reste bien afficher, ce que j'aimerai, c'est un genre de document.all, qui ferme tous les autres..

je suis pas très clair là.

SpaceFrog : merci pour ton lien, mais je n'ai rien compris du tout

**SpaceFrog** · 09/07/2009, 13h52

le principe est de scanner la collection des divs et de modifier ses propriétés en fonction du div ayant declenché ce scan ...

**franculo_caoulene** · 09/07/2009, 14h02

Il faut savoir se poser et relire les réponses :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>réinitialiser le style des éléments du menu</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;color:#ddd;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  ul {margin:20px;}
  li {margin:5px;padding:5px;background:#333;list-style-type:none;}
  .focus {background:#ddd;color:#222;}
  </style>
</head>
<body>
  <ul id="menu">
    <li>blah</li>
    <li>bleh</li>
    <li>blih</li>
    <li>bloh</li>
    <li>bluh</li>
  </ul>
  <script type="text/javascript">
  <!--
  /*** ce qui suit n'est pas important, c'est juste ma façon d'attacher un évènement **/
  var FC = {
  Evenement: {
      evenements: [],
      ajouter: function(elm, evt, fn) {
        var fni = function(e) {                             // prévient le comportement par défaut
          if (fn(e)===false) {                              // false explicitement car peut être undefined en cas de délégation d'évènement
            if (e.preventDefault) { e.preventDefault(); }
            else { e.returnValue = false; }
          }
        };
        if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
        else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
        FC.Evenement.evenements.push([elm, evt, fni]);
      },
      supprimer: function(elm, evt, fn) {
        var evts = FC.Evenement.evenements;
        for (var i=evts.length-1; i>=0; i--) {
          if (evts[i][0]===elm && evts[i][1]===evt) {
            if (document.removeEventListener) { elm.removeEventListener(evts[i][1], evts[i][2], false); } 
            else if (document.detachEvent) { elm.detachEvent("on" + evts[i][1], evts[i][2]); }
            FC.Evenement.evenements.splice(i,1);
          }
        }
      }
    }
  }
  /*** ce qui précède n'est pas important, c'est juste ma façon d'attacher un évènement **/
 
  FC.Evenement.ajouter(document.getElementById("menu"), "mouseover", function(e) {
    var elm = e.target || event.srcElement;
    if (elm.tagName.toLowerCase()==="li") {
      elm.className = "focus";
    }
  });
  FC.Evenement.ajouter(document.getElementById("menu"), "mouseout", function(e) {
    var elms = document.getElementById("menu").getElementsByTagName("li");
    for (var i=0,imax=elms.length;i<imax; i++) {
      elms[i].className = "";
    }
  });
  //-->
  </script>
</body>
</html>

**RomainVALERI** · 09/07/2009, 16h02

Un exemple simple et (très) basique, juste pour donner une idée de l'implémentation :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// affiche le sujet d'indice donné, masque tous les autres
function voirSujet(numSujet) {
   var sujets = document.getElementById("sujets").getElementsByTagName("div");
   for (sujet in sujets) {
      if ((sujets[sujet].id) && (sujets[sujet].id.substr(0, 5) == "sujet")) {
         if (sujets[sujet].id == 'sujet_' + numSujet)
            sujets[sujet].style.display = "";
         else
            sujets[sujet].style.display = "none";
      }
   }
}

avec comme code html (extrait):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="sujets">      
   <div id="sujet_0">
      <!-- contenu du sujet 0 -->
   </div>         
   <div id="sujet_1">
      <!-- contenu du sujet 1 -->
   </div>
   <!-- etc. etc. -->
</div>

et pour la navigation :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="navigation">
   <ul id="menu">
      <li>
         <a id="nav_1" onclick="voirSujet(1)">Sujet 1</a>
      </li>
      <li>
         <a id="nav_2" onclick="voirSujet(2)">Sujet 2</a>
      </li>
      <!-- etc. etc. -->

mais bien entendu j'ai un peu simplifié pour l'exemple : chez moi il n'y a pas de propriété onclick directement sur l'élément a : c'est une fonction lancée au load de la page qui pose sur tous les gestionnaires d'événement sur les éléments... ^^ mais bon on en est pas là

afficher un div et cacher tous les autres

JavaScript

Vue hybride

Discussions similaires

Partager

Partager