active Eigenschaft wird nicht angenommen / JavaScript auch dabei

Status
Nicht offen für weitere Antworten.
H

hugo1981

Erfahrenes Mitglied
Hallo @ll,

ich habe ein aufklappbares Menü gebastelt (thx an das Tutorial hier), dass ich in einem Frameset als Navi einsetzten will. (Frameset war nicht meine Idee, muss jetzt aber damit leben :suspekt: )

Das ganze schaut ganz ok aus, funktioniert an sich auch. Ausser, dass der aktuelle Menüpunkt die von mir zugewiesene css Eigenschaft nicht annimmt..

Vielleicht sehe ich den Fehler einfach nicht, oder ist das ein bekanntes Problem?

Vielen Dank für Eure Hilfe im Voraus.
lg,
hugo

Anbei die Codes:
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="aufklapp_nav.css" type="text/css">
<title>Unbenanntes Dokument</title>

<script type="text/javascript">
<!--

function show(divid) {
d=document;
d.getElementById("cat1").style.display="none";
d.getElementById("cat2").style.display="none";
d.getElementById("cat3").style.display="none";


d.getElementById(divid).style.display="inline";
show2(dicid);
}

function show2(divid) {
d=document;
d.getElementById("cat32").style.display="none";


d.getElementById(divid).style.display="inline";

}
//-->
</script>
</head>

<body>
<table width="128">
  <tr><td width="120">



<div class="ober"><a href="#" onclick="show('cat1')">Category 1</a><br></div>
<div class="unter" id="cat1" style="display:none">
<a href="#">Sub 1.1</a><br>
<a href="#">Sub 1.2</a><br>
<a href="#">Sub 1.3333333</a><br>
</div>

<div class="ober"><a href="#" onclick="show('cat2')">Category 2</a><br></div>
<div class="unter" id="cat2" style="display:none">
<a href="#">Sub 2.1</a><br>
<a href="#">Sub 2.2</a><br>
<a href="#">Sub 2.3</a><br>
</div>

<div class="ober"><a href="#" onclick="show('cat3')">Category 3</a><br></div>
<div class="unter" id="cat3" style="display:none">
<a href="#" onclick="show2('cat31')">Sub 3.1</a><br>
<a href="#" onclick="show2('cat32')">Sub 3.2</a><br>
	<div class="unter2" id="cat32" style="display:none">
	<a href="#" onclick="show2('cat32')" class="unter2_a">sub 3.2.1</a><br />
	<a href="#" class="unter2_a" >sub 3.2.2</a><br />
	<a href="#"  class="unter2_a">sub 3.2.3</a><br />
	<a href="#"  class="unter2_a">sub 3.2.4</a></div>
<a href="#" onclick="show2('cat33')">Sub 3.3</a><br>
</div>

</td></tr>
</table>

</body>
</html>

HTML: 
/* CSS Document */

a {  font-family:  Arial, Helvetica, sans-serif; font-size: 11px; 
font-weight: normal; color:#333333; text-decoration: none;}

a:active {  font-weight: bold; text-decoration: none;}

table.tabelle {  border-style: outset; border-top-width: 1px; border-right-width: 
1px; border-bottom-width: 1px; border-left-width: 1px}

a:hover {  text-decoration: none; font-weight: 600;}
a:visited {  }

div.ober {background-color:#CCCCCC; clear:both; margin-top: 2px; padding:3px;}
div.unter {background-color:#CCFF99; width:inherit; float:left; clear:both; margin-bottom:2px; margin-left:5px;}
div.unter2 {float:left; clear:right; margin-bottom:1px; color:#666666; margin-left:5px; width:inherit;}
.unter2_a {text-indent: 5px; color:#666666;}

/*div.rahmen { content:inherit; display:list-item;}
*/

a.nav, a.nav:link, a.nav:visited {  color:#333333; text-decoration: none; font-weight: normal;}
 
Zuletzt bearbeitet:
ahh,

kannst Du mir dann bitte auf die Sprünge helfen, wie ich mein Ziel erreichen kann?
Der aktuelle Menüpunkt soll einfach nur Fett dargestellt werden.

Mir ist soeben auch aufgefallen, dass das ganze im IE7 nicht mehr so gut ausschaut :( da weden die Ränder der DIVs nicht mehr bis zu den Tabellenrändern erweitert. Kann ich das erzwingen? Der rechte Rand (oder auch alle) Der Divs sollen gleich Breit sein.

Vielen Dank nochmals..
 
Da wirst du JS hinzuziehen müssen.

Code: 
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
Code: 
a.nav, a.clicked {
color: #b9b9b9;
}

a.nav:hover, a.clicked {
color: #0090E0;
}
Code: 
<a href="#link1" class="nav" onclick="aktivieren(this.href)">link 1</a>
<a href="#link2" class="nav" onclick="aktivieren(this.href)">link 2</a>
<a href="#link3" class="nav" onclick="aktivieren(this.href)">link 3</a>
mfg Maik
 
Danke,

kann ich denn in onClick() zwei methoden ausführen lassen?
Wenn es nicht geht, werde ich wohl auf die Markierung des "aktiven" also als letztes gewählten Links verzichten.

Was mache ich im css falsch, dass die divs der unterkategorie im IE nicht die Breite der oberen Divs annehmen?

Vielen Dank nochmal..
 
Hi,

du kannst im onclick-Eventhandler die JS-Funktionen durch ein Semikolon voneinander getrennt aufrufen - also:

Code: 
onclick="show('cat1');aktivieren(this.href);"

Was die Breite der Subkategorien betrifft, setz mal in der Breitenangabe anstelle von inherit einen fixen Wert ein:

Code: 
div.unter {background-color:#CCFF99; width:115px; float:left; clear:both; margin-bottom:2px; margin-left:5px;}

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück