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à

**maysa** · 10/07/2009, 08h38

Merci pour vos réponses.

Finalement j'ai procédé autrement.
voici mon code (bon y'a du smarty dedans)

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
<div id="onglet">
        <ul id="listOnglet">
         {foreach from=$aOnglets item=unOnglet}
            {if $ongletActif eq $unOnglet.numItem}
               {assign var='class' value='current'}
            {else}
               {assign var='class' value=''}
            {/if}
         <li id='onglet{$unOnglet.numItem}' class="{$class}"><a href="{$unOnglet.href}"  alt="{$unOnglet.alt} "  onmouseover="afficheSousMenu({$unOnglet.numItem})" title="{$unOnglet.alt}">{$unOnglet.nomItem}</a></li>
          {/foreach}
       </ul>
   </div>
   {foreach from=$aSousMenuActif item=unSousMenu key=numOnglet}
 
   <div id="sousMenu{$numOnglet}" class="sousMenu" {if $ongletActif eq $numOnglet}style="display:block;"{else}style="display:none;"{/if}>
   {foreach from=$unSousMenu item=sousMenu name=sousMenu}
   			{if $sousMenuActif eq $sousMenu.numItem}
               {assign var='class' value='current'}
            {else}
               {assign var='class' value=''}
            {/if}
      <span class="{$class}"><a href="{$sousMenu.href}" alt="{$sousMenu.alt}" title="{$unSousMenu.title}">{$sousMenu.nomItem}</a></span>
     {if !$smarty.foreach.sousMenu.last}<span class="separation">|</span>{/if}
   {/foreach}
   </div> {/foreach}

J'aurais bien voulu pouvoir compter le nombre de li (onglet) avec child ou parent, mais je n'ai pas réussi, donc, je compte en php et je mets cette valeur dans un input hidden (le menu est créé via la bdd donc le nb d'onglets peut changer)

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
function afficheSousMenu(numonglet)
{
	var divToShow = 'sousMenu'+numonglet;
 
	var nbOnglet = document.getElementById('nbOnglet').value;
 
	for (var i=1;i<=nbOnglet;i++)
	{ 
		document.getElementById('sousMenu'+i).style.display='none';
		if(i!=numonglet)
		{
			document.getElementById('onglet'+i).className="";
		}
	}
		document.getElementById(divToShow).style.display='block';
		document.getElementById('onglet'+numonglet).className="current";
 
}

Bon c'est pas forcément propre, mais mes connaissances en javascript sont limitées. Mais j'essayer de m'y pencher un peu plus quand j'aurais du temps.

Sinon, comment aurais-pu pu récupérer le nombre d'onglet en javascript ?

Merci

**SpaceFrog** · 10/07/2009, 08h41

je me demande bien à quoi pourraoentr servir des trucs comme

Code :

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

1
2
3
getElementsByTagName('li')
//ou 
childNodes

...

**maysa** · 10/07/2009, 11h38

Envoyé par SpaceFrog

je me demande bien à quoi pourraoentr servir des trucs comme

Code :

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

1
2
3
getElementsByTagName('li')
//ou 
childNodes

...

oui j'ai essayé le getElementsByTagName('li'), avec un length dessus, mais il ne me donne pas le bon nombre.

.
childNodes... oui mais à partir d'où ? si je fais sur le onclick,je suis sur la balise a, et je ne veux pas les enfants mais les grands parents.
j'ai tenté un parentNodes, puis parentNodes de ce parentNodes, mais ça n'a pas fonctionné...
voilà

**franculo_caoulene** · 10/07/2009, 11h43

1) on ne veut pas de code serveur dans ce que tu nous proposes, ça nous aide pas à t'aider.
2)

Code :

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

document.getElementById("listOnglet").getElementsbyTagName("li")

devrait retourner les onglets.

**maysa** · 15/07/2009, 10h01

Tant pis,

j'ai réussi à me débrouiller en php... on verra une prochaine fois pour le javascript.
Merci à tous

**Va_viper** · 20/01/2010, 19h47

Bonjour, désolé de faire remonter un vieux sujet, mais je suis tombé sur celui-ci par Google en cherchant une réponse à ma question que voici :

J'utilise une fonction Javascript pour masquer/afficher un menu déroulant, jusqu'à maintenant j'utilisais une fonction par menu mais par soucis d'optimisation, je me dois de condenser ces deux fonctions en une seule.
Mon problème est que j'aimerais masquer tout mes éléments <li> en même temps, sachant que ceux-ci se trouve dans des <div> différentes. Est-ce que je peux utiliser une méthode du style :

Code JavaScript :

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

1
2
 
document.getElementsByTagName('li').style.display='none';

ou est-ce que je dois vraiment parcourir tout le document ?

**SpaceFrog** · 20/01/2010, 19h53

parcourir oui masi pas tout le document

la collection

Code :

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

document.getElementsByTagName('li')

suffira

**Va_viper** · 20/01/2010, 20h32

D'accord je comprends (pourtant la logique DOM et moi ca fais 3), donc avec un simple "for each" sur cette collection j'arriverais à faire ce que je veux, merci bien

A tout hasard, est-ce que l'un d'entre vous ne connaîtriez pas une JavaDoc mais pour JavaScript, avec la bibliothèque des classes, des attributs et méthodes ?

**Bovino** · 20/01/2010, 20h37

Envoyé par Va_viper

D'accord je comprends (pourtant la logique DOM et moi ca fais 3), donc avec un simple "for each" sur cette collection j'arriverais à faire ce que je veux, merci bien

Oui, dès que foreach sera implémenté en JavaScript

**Va_viper** · 20/01/2010, 20h56

Envoyé par Bovino

Oui, dès que foreach sera implémenté en JavaScript

Arfeu... Je fais du web une fois l'année alors, faut se remettre dans le bain

Une boucle jusqu'à maCollection.length devrait faire l'affaire alors

**RomainVALERI** · 20/01/2010, 21h09

Envoyé par Va_viper

A tout hasard, est-ce que l'un d'entre vous ne connaîtriez pas une JavaDoc mais pour JavaScript, avec la bibliothèque des classes, des attributs et méthodes ?

Hop hop hop. ^^

**Va_viper** · 20/01/2010, 22h17

Aaaaah, parfait, je te remercie

Enfin un peu de lecture ^^

afficher un div et cacher tous les autres

JavaScript

Discussions similaires

Partager

Partager