Alterner le className en JavaScript

Bonjour,

J'ai un menu et lorsque l'on clique sur menu1 on applique la className "tab2" et lorsque l'on clique sur menu2 on applique la className tab2 puis menu1 revient à l'initial soit la className "tab1". Mais ça ne fonctionne pas trop bien :euh: .

Voici mon code :

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
 
<html>
<head>
<title>menu</title>
<style>
body { margin: 0; padding: 0; }
#div1 { left: 0; height: 40px; position: absolute; top:0; background: #2d2d2d; font-size: 24px; width: 100%; margin: 0; 
        padding: 0; border-bottom: 1px solid #2d2d2d; }
#ac { font: 13px Arial,sans-serif; }
.tab1 { border-left: 1px solid transparent; border-right: 1px solid transparent; display: block; padding-bottom: 0px; 
        padding-left: 5px; padding-top: 0px; position: relative; z-index: 1000; cursor: pointer; }
.tab2 { background: #ffffff; padding-top:2px; padding-bottom:1px; border: 1px solid #bebebe; position: relative; z-index: 1000;
         cursor: pointer; padding-left: 5px; display: block; }
#ab .tab2{color:#000 !important;font-weight:bold}
 
.tab1:hover { color: #ffffff; }
.abc { position: relative; display: -moz-inline-box; display: inline-block; line-height: 27px; padding: 0; vertical-align: top; }
#ab { position:absolute; white-space: nowrap; top: 0; height: 30px; left: 0; padding-left: 4px; }
#ab .gbgt:focus { color: #fff!important; }
#ab .gbgt { color: #bbb !important; font-weight: bold; }
</style>
<script type="text/javascript">
dom = document.getElementById;
function menu(id)
{
  if(dom)
  {
    var ar2 = document.getElementById("ab").getElementsByTagName("span"); 
    if(document.getElementById(id).className != "tab2")
    { 
      for (var i=0; i<ar2.length; i++)
      {
        if (ar2[i].className=="tab1")
	ar2[i].className = "tab1";
      }
      document.getElementById(id).className = "tab2";
    }
    else
    {
      document.getElementById(id).className = "tab1";
    }
  }
 
}
</script>
 
</head>
<body>
<div id="ac">
<div id="ab">
<ol class=gbtc>
  <li class="abc">
    <a class="gbgt" onclick="menu('id1')">
    <span id="id1" class="tab1">menu1</span></a>
  </li>
 
  <li class="abc">
    <a class="gbgt" onclick="menu('id2')">
    <span id="id2" class="tab1">menu2</span></a>
  </li>
</ol>
</div>
<div id="div1"></div>
</div>
</body>
</html>

Avez vous une petite idée ?

merci à vous et bonne journée