Show/hide différente div

**crush911** · 11/06/2014, 16h13

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 :

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

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

Code html :

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

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&ecirc;che</a></li>
	<li><a href="#">Randonn&eacute;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>

**SpaceFrog** · 11/06/2014, 16h16

Code :

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

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

Code :

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

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

**crush911** · 11/06/2014, 16h19

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

**SpaceFrog** · 11/06/2014, 16h23

Code :

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

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";
 }
}
}

**crush911** · 11/06/2014, 16h43

merci mais j'essaie et ça fonctionne pas

Code :

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

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 html :

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
<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>

**SpaceFrog** · 11/06/2014, 17h29

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
<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>

Show/hide différente div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager