Bettina: Probleme mit showhide Funktion

Beitrag lesen

Hallo,

ich habe ein akutes Problem und würde mich sehr freuen, wenn mir jemand helfen kann! Ich habe eine Navigation mit Aufklappmenü, realisiert mit showhide. Firefox zeigt die Datei ohne Probleme an. Leider öffnet der I.E. bei onklick die neue Ebene nicht. Warum nicht?

Ein anderes Problem habe ich beim Menupunkt Home. Dort soll wiederum ein bereits ausgeklapptes div verschwinden.

Wer kann mir helfen??

Grüße,
Bettina

Hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::dhtml.menu.v1:::</title>

<script type="text/javascript">
<!--
// Arrays für subNav
var maincat = new Array();
maincat[0] = 'cat1';
maincat[1] = 'cat2';
maincat[2] = 'cat3';
maincat[3] = 'cat4';
maincat[4] = 'cat5';

// subNav ein- und ausblenden
function ShowHideMain(divid)
{
        if(document.getElementById(divid).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }

document.getElementById(divid).style.display="block";
        }
        else
        {
                document.getElementById(divid).style.display="none";
        }
}

// aktiven Link hervorheben
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(main|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'main';
                        }
                }
        }
}
//-->
</script>

<style type="text/css">
<!--
#navBox {
width: 890px;
position: absolute;
left: 50%;
margin-left: -445px;
top: 20px;
height: 110px;
background: #c0c0c0;
}

#mainNav {
width: 200px;
height: 100px;
border-right: 2px solid #dfdfdf;
margin: 5px 0 0 5px;
}

#subNav {
width: 200px;
height: 100px;
position: absolute;
left: 205px;
top: 5px;
}

.infoBox {
width: 200px;
height: 100px;
border-right: 2px solid #dfdfdf;
}

a:link, a:visited {
display: block;
width: 195px;
font-family: arial, sans-serif;
color: #fff;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-left: 5px;

}

a.clicked {
background: #dfdfdf;
}
-->
</style>

</head>
<body>

<div id="navBox">
     <div id="mainNav">
          <a href="#home" class="clicked" onclick="aktivieren(this.href)">Home</a>
          <a href="#cat1" class="main" onclick="ShowHideMain('cat1');aktivieren(this.href)">Main1</a>
          <a href="#cat2" class="main" onclick="ShowHideMain('cat2');aktivieren(this.href)">Main2</a>
          <a href="#cat3" class="main" onclick="ShowHideMain('cat3');aktivieren(this.href)">Main3</a>
          <a href="#cat4" class="main" onclick="ShowHideMain('cat4');aktivieren(this.href)">Main4</a>
          <a href="#cat5" class="main" onclick="ShowHideMain('cat5');aktivieren(this.href)">Main5</a>
     </div>

<div id="subNav">
          <div id="cat1" class="infoBox" style="display:none">
               <a href="#">Link1</a>
               <a href="#">Link2</a>
               <a href="#">Link3</a>
          </div>
          <div id="cat2" class="infoBox" style="display:none">
               <a href="#">Link4</a>
               <a href="#">Link5</a>
               <a href="#">Link6</a>
          </div>
          <div id="cat3" class="infoBox" style="display:none">
               <a href="#">Link7</a>
               <a href="#">Link8</a>
          </div>
          <div id="cat4" class="infoBox" style="display:none">
               <a href="#">Link9</a>
               <a href="#">Link10</a>
          </div>
          <div id="cat5" class="infoBox" style="display:none">
               <a href="#">Link11</a>
               <a href="#">Link12</a>
          </div>
     </div>
</div>

</body>
</html>