Show/hide différente div

Version imprimable

Bonjour, je commence en javascript et j'ai besoin d'aide.

Avec un menu principal, je veux faire afficher un sous-menu avec une fonction javascript

Je veux quand je clique sur test1 faire apparaître la liste "aventure" et quand je clique sur test2 faire apparaître la div "culture" mais que si l'autre div a été cliqué, qu'elle disparaisse

comment je peux faire?
Code:

1 2 3 function sousMenu(myDIV){ document.getElementById(myDIV).style.display = "block"; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <ul> <li><a onclick ="sousMenu('aventure')" href="#">test1</a></li> <li><a onclick ="sousMenu('culture')" href="#">test2</a></li> </ul> <div><ul id="aventure" style=" display:none;"> <li><a href="#">Excursions</a></li> <li><a href="#">Pêche</a></li> <li><a href="#">Randonnée</a></li> </ul></div> <div><ul id="culture" style=" display:none;"> <li><a href="#filter=.circuits">Circuits</a></li> <li><a href="#filter=.patrimoine">Patrimoine</a></li> </ul></div>

Code:

1
2
3
4
5
6
function sousMenu(hide, show){
 
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
 
}

Code:

1
2
<li><a onclick ="sousMenu('aventure','culture')" href="#">test1</a></li>
<li><a onclick ="sousMenu('culture', 'aventure')" href="#">test2</a></li>

11/06/2014, 16h19
crush911

oui ok mais dans mon exemple j'ai mis 2 exemples, mais en réalité j'ai 5 éléments de menu avec 5 liste différentes

Code:

1
2
3
4
5
6
7
8
9
10
11
function sousMenu(show){
 tabDivs=['aventure', 'culture', 'elt3', 'elt4','elt5']; 
var i=-1;
while(tabDivs[++i]){
 if(tabDIvs[i]==show){
document.getElementById(show).style.display ="block";}
else{
document.getElementById(hide).style.display = "none";
 }
}
}

merci mais j'essaie et ça fonctionne pas :(

Code:

1
2
3
4
5
6
7
8
9
10
11
function sousMenu(show){
 tabDivs=['aventure', 'culture', 'elt3', 'elt4','elt5']; 
var i=-1;
while(tabDivs[++i]){
 if(tabDIvs[i]==show){
  document.getElementById(show).style.display ="block";}
  else{
document.getElementById(hide).style.display = "none";
   }
}
}

Code:

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
<ul>
	<li><a onclick ="sousMenu('aventure')" href="#">test1</a></li>
	<li><a onclick ="sousMenu('culture')" href="#">test2</a></li>
        <li><a onclick ="sousMenu('elt3')" href="#">test3</a></li>
	<li><a onclick ="sousMenu('elt4')" href="#">test4</a></li>
        <li><a onclick ="sousMenu('elt5')" href="#">test5</a></li>
</ul>
<ul id="aventure" style=" display:none;">
	<li><a href="#">Excursions</a></li>
	<li><a href="#">P&ecirc;che</a></li>
	<li><a href="#">Randonn&eacute;e</a></li>
</ul>
<ul id="culture" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt3" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt4" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt5" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>

Code:

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
<html>
<head>
<script type='text/javascript'>
 
function ssMenu(show){
 tabDivs=['aventure', 'culture', 'elt3', 'elt4','elt5']; 
var i=-1;
while(tabDivs[++i]){
  document.getElementById(tabDivs[i]).style.display =(tabDivs[i] == show)?"block":"none";
}
}
</script>
</head>
<body>
<ul>
	<li><a onclick ="ssMenu('aventure'); return false;" href="#">test1</a></li>
	<li><a onclick ="ssMenu('culture'); return false;" href="#">test2</a></li>
        <li><a onclick ="ssMenu('elt3'); return false;" href="#">test3</a></li>
	<li><a onclick ="ssMenu('elt4'); return false;" href="#">test4</a></li>
        <li><a onclick ="ssMenu('elt5'); return false;" href="#">test5</a></li>
</ul>
<ul id="aventure" style=" display:none;">
	<li><a href="#">Excursions 0</a></li>
	<li><a href="#">P&ecirc;che</a></li>
	<li><a href="#">Randonn&eacute;e</a></li>
</ul>
<ul id="culture" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 1</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt3" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 2</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt4" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 3</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt5" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 4</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
 
</body>
<html>

merci

Citation:

Envoyé par SpaceFrog

Code:

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
<html>
<head>
<script type='text/javascript'>
 
function ssMenu(show){
 tabDivs=['aventure', 'culture', 'elt3', 'elt4','elt5']; 
var i=-1;
while(tabDivs[++i]){
  document.getElementById(tabDivs[i]).style.display =(tabDivs[i] == show)?"block":"none";
}
}
</script>
</head>
<body>
<ul>
	<li><a onclick ="ssMenu('aventure'); return false;" href="#">test1</a></li>
	<li><a onclick ="ssMenu('culture'); return false;" href="#">test2</a></li>
        <li><a onclick ="ssMenu('elt3'); return false;" href="#">test3</a></li>
	<li><a onclick ="ssMenu('elt4'); return false;" href="#">test4</a></li>
        <li><a onclick ="ssMenu('elt5'); return false;" href="#">test5</a></li>
</ul>
<ul id="aventure" style=" display:none;">
	<li><a href="#">Excursions 0</a></li>
	<li><a href="#">P&ecirc;che</a></li>
	<li><a href="#">Randonn&eacute;e</a></li>
</ul>
<ul id="culture" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 1</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt3" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 2</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt4" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 3</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
<ul id="elt5" style=" display:none;">
	<li><a href="#filter=.circuits">Circuits 4</a></li>
	<li><a href="#filter=.patrimoine">Patrimoine</a></li>
</ul>
 
</body>
<html>