nicht angemeldet
3 DIVs übereinander visible/hidden machen
Kai345
StruppiHallo,
es liegen 3 DIVs übereinander, DIV1 ist sichtbar... bei klick auf die R1/R2/R3 soll das jeweilige DIV angezeigt werden und die anderen unsichtbar gemacht werden.
Nur leider tut sich überhaupt nichts:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css">
.content{position:absolute;left:70px;top:70px;width:226px;height:156px}
</style>
<script type="text/javascript">
function ebene(div_id)
{
if(div_id='rubrik_1')
{
document.getElementById('rubrik_1').style.visibility ='visible';
document.getElementById('rubrik_2').style.visibility ='hidden';
document.getElementById('rubrik_3').style.visibility ='hidden';
}
if(div_id='rubrik_2')
{
document.getElementById('rubrik__2').style.visibility ='visible';
document.getElementById('rubrik_1').style.visibility ='hidden';
document.getElementById('rubrik_3').style.visibility ='hidden';
}
if(div_id='rubrik_3')
{
document.getElementById('rubrik_3').style.visibility ='visible';
document.getElementById('rubrik_2').style.visibility ='hidden';
document.getElementById('rubrik_1').style.visibility ='hidden';
}
return false;
}
</script>
</head>
<body>
<a href="#" onClick="ebene('rubrik_1');">R1</a><br>
<a href="#" onClick="ebene('rubrik_2');">R2</a><br>
<a href="#" onClick="ebene('rubrik_3');">R3</a><br>
<div class=content id="rubrik_1">1...</div>
<div class=content id="rubrik_2" style=visibility:hidden>2...</div>
<div class=content id="rubrik_2" style=visibility:hidden>3...</div>
</body></html>
Danke im Voraus,
Klaus Cuhlmann
-
Grütze .. äh ... Grüße!
Da sind mindestens 3 dicke Fehler drin:
a) Unterscheidung von Zuweisung/Vergleich in JS
b) Attribute und Anführungszeichen
c) id-VergabeCü
Kai--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
Hallo Klaus...
a) Unterscheidung von Zuweisung/Vergleich in JS
b) Attribute und Anführungszeichen
c) id-Vergabea) schau Dir das mal genauer an:
www.infos24.de/javascripte/handbuch/11_js_bedingte_anweisungen.htm
b) Werte für Attribute (id, class...) immer in Anführungszeichen
c) IDs immer eindeutig vergeben - "rubrik_2" gibt's 2xd) in Deinem Script-Block versuchst Du via getElementByID() das Element "rubrik__2" zu finden,
das existiert nichtGeschmackssache:
e) anstelle "visibility" würde ich "display" verwenden - schau Dir da ggf. mal die Unterschiede an
f) Style-Block -> .content -> ich würde hier "display:block" einfügen, damit brauchst Du dann
im HTML-Teil keine weiteren style-Anweisungen mehr setzen. Wenn Du "visibility" weiterverwenden
möchtest, "visibility ='visible'"Ansonsten suchst Du ja nach einer Lösung... bin zwar kein Freund von vorgebastelten Sachen, aber sei
es drum:============================= js snip begin =============================
1 ebene = function(id) {
2 evElem = document.getElementById(id);
3
4 if (!evElem) {
5 window.alert('func ebene: Element oder ID nicht vorhanden');
6 } else {
7 switch(evElem.id) {
8 case"rubrik_1":
9 document.getElementById('rubrik_1').style.display ='block';
10 document.getElementById('rubrik_2').style.display ='none';
11 document.getElementById('rubrik_3').style.display ='none';
12 break;
13 case"rubrik_2":
14 document.getElementById('rubrik_1').style.display ='none';
15 document.getElementById('rubrik_2').style.display ='block';
16 document.getElementById('rubrik_3').style.display ='none';
17 break;
18 case"rubrik_3":
19 document.getElementById('rubrik_1').style.display ='none';
20 document.getElementById('rubrik_2').style.display ='none';
21 document.getElementById('rubrik_3').style.display ='block';
22 break;
23 }
24 }
25 }============================= js snip begin =============================
Zeile 1: nur eine andere Notation für eine Funktion... da ich nicht weiß, was du noch so vorhast
könnte das später hilfreich sein
Zeile 2: holt sich das Element, was angeclickt wurde
Zeile 4: prüft, ob das Element überhaupt vorhanden ist und löst, wenn nicht, eine entsprechende
Fehlermeldung aus. Es kann bei komplexen Sachen sehr hilfreich, wenn man weiß, wo's
klemmt.Zeile 6 bis 22:
In Deinem Fall wird die Verwendung von IF bzw. IF/ELSE oder IF/ELSE IF/.../ELSE zur Verarbeitung
bedingter Anweisungen schnell unübersichtlich - bei 3 Rubriken geht das grad noch, kommen später
ein paar dazu...Ich habe hier mit der SWITCH Anweisung gearbeitet, schon komfortabler und für Dich einfacher
nachzuvollziehen, was passiert. Es geht noch einfacher, vor allem wenn es wirklich mehr Rubriken
werden. Da Du mit einem einheitlichen Class-Attribut arbeitest, bietet es sich an, die Anweisung
in eine FOR-Schleife zu packen. Wie das funktioniert, findest Du an allen Ecken im Netz.Den HTML-Code kannst Du im Grunde so lassen, wenn Du die Hinweise a) bis f) von oben berücksichtigst
und entsprechend anpasst.Grüße, dicon
-
Sorry: unter f) muss natürlich "visibility:visible" stehen...
dicon
-
-
-
Nur leider tut sich überhaupt nichts:
Und wie lautet die Fehlerbeschreibung? Was steht in der Fehlerkonsole? Was hast du getan um diesen Fehler zu beseitigen?
if(div_id='rubrik_1')
Du weißt wie ein Vergleich auf Gleichheit in JS aussieht?
{
document.getElementById('rubrik_1').style.visibility ='visible';
document.getElementById('rubrik_2').style.visibility ='hidden';
document.getElementById('rubrik_3').style.visibility ='hidden';
}if(div_id='rubrik_2')
{
document.getElementById('rubrik__2').style.visibility ='visible';
document.getElementById('rubrik_1').style.visibility ='hidden';
document.getElementById('rubrik_3').style.visibility ='hidden';
}if(div_id='rubrik_3')
{
document.getElementById('rubrik_3').style.visibility ='visible';
document.getElementById('rubrik_2').style.visibility ='hidden';
document.getElementById('rubrik_1').style.visibility ='hidden';
}return false;
Der Code ist sehr aufgebläht, das läßt sich auch kürzer formulieren.
function ebene(div_id){ var anzahl = 3; for(var i = 1; i < anzahl; i++) { var id = 'rubrik_' + i; var o = document.getElementById(id); if(o) o.style.visibility = id == div_id ? 'visible' : 'hidden'; } }Struppi.