afficher un div et cacher tous les autres
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 .
réinitialiser le style des éléments du menu
Il faut savoir se poser et relire les réponses :
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
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> |
