divs ein-/ausblenden

herrgarnele

Erfahrenes Mitglied
Hallo, ich hab mal wieder eine Frage.. :-/

Ich blende auf meiner Site verschiedene div's per JavaScript ein bzw. aus.
Das JS dafür schaut so aus:
Code:
function fadeIn(targetID) {
    obj = document.getElementById(targetID);
    obj.style.display = 'block';
}
function fadeOut(targetID) {
    obj = document.getElementById(targetID);
    obj.style.display = 'none';
}
Im html wird es so aufgerufen:
Code:
<a href="#" onclick="fadeIn('meinlayer')">
<div id="meinlayer" style="display:none;">
        <a href="#" onclick="fadeOut('meinlayer')">close</a>
</div>
Nun habe ich aber mehrere Layer an derselben Stelle, die alle so eingefadet werden können. Ich möchte aber nicht, dass 2 Layer gleichzeitig eingeblendet sind.

Also müsste ich im JS beim fadeIn eine Abfrage in der Richtung
if(irgendein Layer hat display:block){
fadeOut(alle sichtbaren)
fadein(den geklickten)
}

Leider weiss ich nicht wie das konkret in Code umzusetzen ist. :(
Bitte helft mir!!
 
Du könntest bei Einblenden die ID des eingeblendeten Elementes in einer Variablen speichern.
Diese Variable setzt du eingangs auf "false".

Willst du dann etwas einblenden, und diese Variable ist nicht "false", und sie ist nicht identisch mit der ID des einzublendenden Layers, dann blendest du den Layer mit dieser ID aus.
 
Hi Sven!

Danke für Deine Anregung!
Die Richtung ist glaub ich richtig. Ich hätte da aber 2 Fragen:

Wo deklariere ich die Variable mit init-Wert false? Muss ich die ins html-Dokument reinschreiben oder 'darf' ich die auch in meiner ausgelagerte .js deklarieren?

Und zweitens- es könnte ja auch passieren, dass auch mehrere Ebenen auf einmal eingeblendet sind. Wie könnt ich das denn umgehen?
//EDIT: Ups sorry, Denkfehler. Wenn ich nen Layer einblende checke ich ja immer, ob schon einer offen ist. Daher kann ja zu keiner Zeit ein zweiter offen sein. Wie peinlich!

// NOCHMAL EDIT: Inzwischen hab ichs doch hinbekommen. Trotz nicht vorhandenem Schlag auf den Hinterkopf hat sich mein Denkvermögen wohl dramatisch erhöht gerade eben :-)
Falls irgendwann mal jemand ein ähnliches Problem hat (gerne auch zur Korrektur :) ) poste ich hier mal meine Lösung:

Code:
var opn = false;
function fadeIn(targetID) {
	if(opn != false) {
	opn.style.display = 'none';
	}
	obj = document.getElementById(targetID);
	obj.style.display = 'block';
	opn = obj;	
}
function fadeOut(targetID) {
	obj = document.getElementById(targetID);
	obj.style.display = 'none';
}
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück