divs ein- und ausblenden

[sunny]

Hallo zusammen!

Bin gerade dabei, eine Funktion zu schreiben mit der ich Ebenen per Mausklick ein- und ausblenden kann.

Soweit bin ich bisher gekommen:

<script type="text/JavaScript">
var i = 1;
function showobject(ebene){
 if (i % 2 != 0) {
  window.ebene.style.display="block";
 }
 else {
  window.ebene.style.display="none";
 }
 i = i+1;
}
</script>

<a href=# onClick="showobject('vor1')";>Link 1</a>
<div id="vor1">
 Text 1
</div>

<a href=# onClick="showobject('vor2')";>Link 2</a>
<div id="vor1">
 Text 2
</div>

Nur leider funktioniert das so nicht - "window.ebene.style ist Null oder kein Objekt". Kann ich den Namen des divs nicht so an die Funktion übergeben? In "ebene" steht ja der richtige Name drin (wenn ichs per alert ausgebe), aber es scheint im Befehl nicht angewandt zu werden. Wie muss ich das abändern sodass es funktioniert?

Und zweitens, das Ganze funktioniert (wenn ich die EbenenID direkt angebe) nur im IE, kann mir jemand sagen wie ich es auch für Netscape (wenigstens für neuere Versionen) hinbekomme?

Lg,
sunny

[apstrakt]

Hallo Sunny!

Mit

document.getElementById(ebene).style.display="block";

läuft es sowohl im IE ab 5 und im Netscape ab 6 und auch im Opera.

Steht aber auch alles in SelfHTML im Kapitel "DHTML nach dem DOM-Modell".

Tschau,
Axel

[Jan L.]

Hallo,

<script type="text/JavaScript">
var i = 1;
function showobject(ebene){
if (i % 2 != 0) {
  window.ebene.style.display="block";

document.getElementById(ebene).style.display = "block";

}
else {
  window.ebene.style.display="none";

s.o.

}
i = i+1;
}
</script>

<a href=# onClick="showobject('vor1')";>Link 1</a>
<div id="vor1">
Text 1
</div>

<a href=# onClick="showobject('vor2')";>Link 2</a>
<div id="vor1">
Text 2
</div>

Nur leider funktioniert das so nicht - "window.ebene.style ist Null oder kein Objekt".

getElementById ist eine Methode von document. Für ältere Browser müßte man wohl document.all oder document.layers benutzen. Auf jeden Fall lag der Fehler erst mal bei dem 'window'.

Und zweitens, das Ganze funktioniert (wenn ich die EbenenID direkt angebe) nur im IE, kann mir jemand sagen wie ich es auch für Netscape (wenigstens für neuere Versionen) hinbekomme?

So, wie ich es beschrieben habe, sollte es in allen aktuellen Browsern funktionieren.

Gruß, Jan

[sunny]

Danke für die schnelle Hilfe, es funktioniert!

Lg,
sunny

[sunny]

Ich bins nochmal!

Jetzt gibts noch ein Problem das ich nicht bedacht hatte.

Also nochmal zur Erklärung, es gibt mehrere mehrere links und mehrere divs. Wenn man auf einen link klickt soll das dazugehörige div eingeblendet werden, wenn man nocheinmal auf denselben link klickt soll es wieder ausgeblendet werden. Das funktioniert ja auch bereits mit dem vorhin geposteten Script.

Allerdings möchte ich wenn man auf einen link klickt und dann gleich auf einen anderen link, dass dann das eine div (das ja jetzt sichtbar ist) ausgeblendet wird und das neue div eingeblendet wird. Das funktioniert so natürlich nicht, weil ich ja nur mit der Variable i gearbeitet hatte und bei jedem Klick die jeweilige Ebene ein- oder ausgeblendet hab. Das heißt, wenn obiger Fall eintritt (Klick auf link1 - dann auf link2) wird das zweite div unsichtbar gemacht obwohl es ja ohnehin noch unsichtbar ist) und das erste div bleibt stehen, das wird ja gar nicht angesprochen ...

Das mit der einen Variable zum hochzählen war wohl ein zu einfacher Ansatz, wie würdet ihr das lösen? Eine eigene function für jedes div? Das müsste doch auch rationeller gehen? Würd mich freuen wenn nochmal jemand einen Lösungsansatz für mich hätte!

Lg,
sunny

[Andreas-Lindig]

Hi,

Allerdings möchte ich wenn man auf einen link klickt und dann gleich auf einen anderen link, dass dann das eine div (das ja jetzt sichtbar ist) ausgeblendet wird und das neue div eingeblendet wird...

das Problem hast Du immer bei Menüleisten mit wechselbuttons.
Ich mache das so, daß ich eine 'merker'-Variable definiere, in die der jeweils aktivierte Button (mit name, nummer oder als objekt) eingetragen wird. in der aktivierungsfunktin muß dann noch abgefragt werden, welcher Button gerade aktiv ist und den dann ausschalten.

gruß, Andreas

[sunny]

Hmmm, ich habs jetzt so gelöst:

<script type="text/JavaScript">
function showobject(ebene){
 if (document.getElementById(ebene).style.display == "block") {
  document.getElementById(ebene).style.display = "none";
 }
 else {
  document.getElementById("vor1").style.display = "none";
  document.getElementById("vor2").style.display = "none";
  document.getElementById("vor3").style.display = "none";
  document.getElementById("vor4").style.display = "none";
  document.getElementById("vor5").style.display = "none";
  document.getElementById(ebene).style.display = "block";
 }
}
</script>

So funktionierts zumindest so wie ich es haben möchte. Klickt man zweimal auf denselben Link dann wird beim zweiten Klick das div wieder ausgeblendet. Klickt man beim zweiten Mal auf einen anderen Link so wird das div eingeblendet und das zuvor geöffnete ausgeblendet.

Danke für die Hilfe,
lg,
sunny

[Andreas-Lindig]

ja, so sieht mans öfters, ist jedenfalls 'sicher', daß alle ausgeschaltet werden. Aber pack' die Dinger wenigstens in eine Schleife, dann kannst Du besser erweitern.

Gruß, Andreas

[sunny]

Hallo!

ja, so sieht mans öfters, ist jedenfalls 'sicher', daß alle ausgeschaltet werden. Aber pack' die Dinger wenigstens in eine Schleife, dann kannst Du besser erweitern.

Das hatte ich mir auch schon überlegt, da das Ganze aber bestimmt nicht so schnell bzw. gar nicht erweitert werden wird (es handelt sich nicht um ein Navigationsmenü), hab ichs vorerst einmal so gelassen.

Das Problem ist allerdings - Opera verstehts nicht! Was mach ich damit? Eine Idee?

Lg,
sunny