Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Mehrere Divs übereinander stapeln
#1
Hallo liebe Experten,

ich habe das folgendes Problem und möchte wissen, ob mein Lösungsansatz dafür gut bzw. richtig ist:

HTML

-> 3 Felder mit unterschiedlichen ID's. Für jedes Feld soll beim Anklicken an gleicher Stelle ein Div mit entsprechenden Informationen erscheinen:

<div class='span6' id='feld1' onclick="einblenden('info_feld1')">
<div class='span6' id='feld2' onclick="einblenden('info_feld2')">
<div class='span6' id='feld3' onclick="einblenden('info_feld3')">

Informationsfelder:
<div class='span3' id='info_feld1'>
<div class='span3' id='info_feld2'>
<div class='span3' id='info_feld3'>


Das einblenden der Divs klappt auch wunderbar mit einer Java-Script-Funktion. Jedoch überlagern sich die Info-Felder und man sieht immer nur das oberste.

Meine Idee:
Den z-Index mit einer Java-Script Funktion so verändern, dass angeforderte Info-Feld immer den höchsten Index hat und somit vorne liegt.

Ist das sinnvoll und wenn ja, wie geht man am besten vor?


Vielen Dank vorab für die Hilfe Smile

LG Steffi
Zitieren
#2
Hallo zusammen,

vielleicht hilft es weiter, wenn ich euch meine JavaScript-Funktion zeige Smile
Würde mich wirklich sehr über einen Tipp freuen.

Code:
function einblenden(spanID){
    
        var spanID = document.getElementById(spanID);
    
                
            if (spanID.style.display == 'none') {
                spanID.style.display = 'block';
                }
            else (spanID.style.display = 'none');
                
    return 0;
}
Zitieren
#3
Hallo Steffi,

ich würde dazu tendieren bei einem Click zuerst alle Informationsfelder auszublenden und dann nur das eine wieder einzublenden, welches eingeblendet werden soll.

Dazu kannst du den Informationsfeldern noch eine neue Klasse geben.
Hier habe ich dir das mal als Beispiel zusammengefasst:
http://jsbin.com/EjoSOhO/1/

Das ginge natürlich noch ein bisschen besser, indem man die JavaScript-Funktion nicht als Attribut aufruft, sondern via JavaScript einen Event-Listener vergibt.
Aber für ein erstes gutes Ergebnis sollte das reichen.

Viele Grüße
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste