Discussion :

[chris801]

Bonjour

je dois afficher masquer des divs avec javascript, jusque la rien de bien sorcier !
j'arrive � afficher ou masquer, sauf que, j'aimerais lors du clic (pour afficher le div), masquer tous les autres div que j'aurais ouvert, je ne connais pas d�avance le nom des id ils peuvent varier.
et je dois en plus changer la class d'un autre �l�ment.

le javascript que j'utilise actuellement :

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
 
// Raffréchir un div
// -------------------------
 
var xhr = null; 
function getXhr()
{
	if (window.XMLHttpRequest) {
//alert('niveau 12');
	xhr = new XMLHttpRequest(); 
	}
	else if (window.ActiveXObject)
	  { 
	  try{
		 xhr = new ActiveXObject("Msxml2.XMLHTTP");
		 }
	  catch (e) 
		 {
		 xhr = new ActiveXObject("Microsoft.XMLHTTP");
		 }
	  }
	else 
	  {
	  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	  xhr = false; 
	  } 
	}
 
function ShowPage(cat_id,id)
{
 
getXhr();
 
xhr.onreadystatechange=function()     {
 
        if (xhr.readyState == 4) /* 4 : état "complete" */
        {
document.getElementById(id).innerHTML=xhr.responseText;
        }
     }
 
 
/* Préparation d'une requête asynchrone de type GET : */
xhr.open("GET","<?php echo URL_CONTROLEURS_MODULE; ?>general.php?vue=detail&id_traitement="+cat_id,true); 
/* Effectue la requête : */
xhr.send(null); 
 
}

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
 
function affiche_cache(nom,nom2) {
 
//alert(" nom1 : "+nom+" // Nom 2 : "+nom2); 
 
//var object = document.getElementById('bloc_2').getElementsByTagName('span');
 
var	chnageSpans = document.getElementById('bloc_2').getElementsByTagName('span');
	    chnageSpans.className = "menuRefs";
 
 
	if (document.getElementById(nom).style.display == "none") {
 
		document.getElementById(nom).style.display = "block";
		document.getElementById(nom2).className = "menuRefsHover";
		//document.getElementsByTagName('span').className = "menuRefsHover";
 
    } else {
        document.getElementById(nom).style.display = "none";
		document.getElementById(nom2).className = "menuRefs";
      }
   }

et mon html simplifi�

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
 
 
       <p ><span Onclick="javascript:affiche_cache('refs_1','cat_1');" style="cursor:pointer;"   id="cat_1">
	    &nbsp; &nbsp; &nbsp; &nbsp; test1       </span></p>
 
 
 
	  <div id="refs_1" style="display:none; margin-bottom:8px; margin-top:15px; margin-left:30px;">
 
	  	   <span  Onclick="javascript:ShowPage(13,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(16,'bloc_1b');"><img src="modules/M_references/vues/img/1314622299-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(12,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(2,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
	    </div>
 
       <p ><span Onclick="javascript:affiche_cache('refs_3','cat_3');" style="cursor:pointer;"   id="cat_3">
	    &nbsp; &nbsp; &nbsp; &nbsp; test 32       </span></p>
 
 
 
	  <div id="refs_3" style="display:none; margin-bottom:8px; margin-top:15px; margin-left:30px;">
 
	  	   <span  Onclick="javascript:ShowPage(9,'bloc_1b');"><img src="modules/M_references/vues/img/1314637325-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(11,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(18,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(17,'bloc_1b');"><img src="modules/M_references/vues/img/1314622352-sp1.jpg" width="30" height="30"></span> 
	    </div>

[NoSmoking]

Bonsoir,
il te suffit, par exemple, de sauvegarder l'�l�ment ouvert dans une variable, ainsi au prochain appel de la fonction, si l'�l�ment est non nul, pour tenir compte du premier appel, alors tu le masques et tu sauvegardes le nouvel �l�ment afficher et ainsi de suite....

[chris801]

merci de cette r�ponse,
simple et efficace,

j'ai parcouru notre ami gg, et trouv� que des solution compliqu�es,

une autre petite question,
comment transf�rer une variable de session en variable javascript
un simple

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
var  maV = <?php echo $_SESSION['maV']; ?>

fonctionne, je vais tester !

[Auteur]

bonjour,

une remarque sur le code HTML :
- �cris les �v�nements en minuscules : onclick et non Onclick.
- supprime le terme javascript: : c'est sans int�r�t derri�re un �v�nement onxxxx. Garde ce terme uniquement pour les pseudo url :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<a href="javascript:taFonctionJS()">bla bla <a/>

[headmax]

Des quotes pour r�cup�rer cot� php est s'est la m�me chose pour les $_GET, $_POST, $_REQUEST, $_COOKIES, $_SERVER...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
var  maV = '<?php echo $_SESSION["maV"]; ?>';

[NoSmoking]

allez pour compl�ter tout cela un petit exemple

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
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.menu {
  color : #080;
  border : 1px solid #ccc;
  width : 200px;
  padding : 5px;
}
.on {
  color : #00f;
  font-weight : bold;
}
.hidden {
  display : none;
}
ul {
  margin-top : 0;
}
</style>
<script type="text/javascript">
var enCours = {
    obj : null,
    div : null
  };
function affiche( obj, div){
  if( enCours.obj){
    // supprime le style
    var sClass = enCours.obj.className.replace('on', '');
    enCours.obj.className= sClass;
    // masque
    enCours.div.style.display = 'none';
  }
  // modification aspect
  if((div = document.getElementById( div)))
    div.style.display = 'block';
  obj.className += ' on';
  // sauvegarde
  enCours.obj = obj;
  enCours.div = div;
}
</script>
</head>
<body>
<div class="menu" onclick="affiche( this, 'menu_1');">Menu #1</div>
<div class="hidden" id="menu_1">
  <ul>
    <li>Item #1.1</li>
    <li>Item #1.2</li>
    <li>Item #1.3</li>
  </ul>
</div>
<div class="menu" onclick="affiche( this, 'menu_2');">Menu #2</div>
<div class="hidden" id="menu_2">
  <ul>
    <li>Item #2.1</li>
    <li>Item #2.2</li>
    <li>Item #2.3</li>
  </ul>
</div>
<div class="menu" onclick="affiche( this, 'menu_3');">Menu #3</div>
<div class="hidden" id="menu_3">
  <ul>
    <li>Item #3.1</li>
    <li>Item #3.2</li>
    <li>Item #3.3</li>
  </ul>
</div>
</body>
</html>