nicht angemeldet
Hallo,
ich habe ein kleines CSS-/JavaScript-Problem. Ich habe auf einer Seite eine Art Auswahlmenü erstellt. Ein Klick auf einen Eintrag soll eine Funktion ausführen, etwa eine Liste einblenden.
Damit der User auch ein optisches Feedback bekommt, ändere ich den Style per JavaScript, indem ich dem Anchor die Klasse "active" zuordne. Firefox und Safari zeigen die Seite richtig an. Der IE(7) entfernt zwar die Klasse "active" vom "alten" Element und weist sie sogar dem "neuen" Element zu, allerdings sieht man davon nur die Hälfte: Das "alte" Element ist nun inaktiv, das "neue" aber nicht aktiv.
Hier mal ein Beispielcode:
CODE START
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#selector {
font-family: Verdana, Courier, Arial, Helvetica, sans-serif;
font-size: 12px }
#selector a:link, #selector a:active, #selector a:visited {
color: #666666;
text-decoration: none;
padding: 1px 5px 1px 5px;
margin: 0px 1px 0px 0px;
background-color: #EFEFEF;
border: #CCCCCC 1px solid }
#selector a:hover {
color: #FFFFFF;
text-decoration: none;
padding: 1px 5px 1px 5px;
margin: 0px 1px 0px 0px;
background-color: #CCCCCC;
border: #AAAAAA 1px solid }
#selector a.active {
color: #CC0000;
background-color: #FFFFFF }
-->
</style>
<script type="text/javascript">
function Select(what) {
switch(what) {
case "A":
document.getElementsByName('A')[0].className='active';
document.getElementsByName('B')[0].className='';
break;
case "B":
document.getElementsByName('A')[0].className='';
document.getElementsByName('B')[0].className='active';
break;
}
}
</script>
</head>
<body>
<div id="selector">
<a href="#" name="A" class='active' onClick="Select('A')">Item A</a>
<a href="#" name="B" onClick="Select('B')">Item B</a>
</div>
</body>
</html>
CODE ENDE
Was mache ich falsch?
Viele Grüße
Aleks