nicht angemeldet
IE zeigt per JavaScript geänderte CSS-Klasse nicht an
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
-
Das ist der Fehler. Du hast die Links mit jeweiligem Zustand festgelegt. Und dann willst du, dass sich die Classe ändert, aber es heißt nicht um sonst Cascadian ....
#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 }versuchs damit
#selector a.active {
color: #CC0000 !IMPORTANT;
background-color: #FFFFFF !IMPORTANT}-
Das ist der Fehler. Du hast die Links mit jeweiligem Zustand festgelegt. Und dann willst du, dass sich die Classe ändert, aber es heißt nicht um sonst Cascadian ....
Verstehe ich. Aber warum zeigt es der IE dann beim ersten Öffnen der Seite korrekt an?
versuchs damit
#selector a.active {
color: #CC0000 !IMPORTANT;
background-color: #FFFFFF !IMPORTANT}Klasse! Ich muss zu meiner Schande gestehen, dass ich so etwas noch nie gesehen habe...
-