Ergebnis 1 bis 9 von 9
  1. #1
    Steffi_88 ist offline Grünschnabel
    registriert
    12-09-2013
    Beiträge
    4

    Mehrere Divs übereinander stapeln

    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? Oder gibt es vielleicht eine viel einfachere Lösung?

    Vielen Dank vorab für die Hilfe Smile

    LG Steffi

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.822

    AW: Mehrere Divs übereinander stapeln

    Hallo Steffi,
    onclick bitte ohne großes C schreiben.
    Zur Frage: Ich würde die beiden jeweils nicht gebrauchten mit style.display='none' einfach ausblenden.

  3. #3
    Steffi_88 ist offline Grünschnabel
    registriert
    12-09-2013
    Beiträge
    4

    AW: Mehrere Divs übereinander stapeln

    Hallo mikdoe,

    danke für deine Antwort und den Hinweis mit dem C.
    Ich hab das natürlich sofort verbessert

    Bei meiner Java-Script-Funktion habe ich bereits mit style.display='none' gearbeitet.
    Hier der 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;
    }


    Das einblenden funktioniert auch wunderbar, nur wie gesagt liegt das Problem bei der Überlagerung der Divs

  4. #4
    master_1 ist offline Mitglied
    registriert
    27-08-2013
    Beiträge
    41

    AW: Mehrere Divs übereinander stapeln

    Hallo !

    Mit style.display='none' bleibt der div immer weg. Wenn ich jetzt die Fragestellung richtig verstanden habe dann versuch mal style.display='inline' und vielleicht wäre auch noch wichtig eine Position anzugeben. Z.B. position:relative oder absolute.

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Mehrere Divs übereinander stapeln

    Du musst dir irgendwo merken, welches Element du als letztes eingeblendet hast und dieses dann am Anfang der Funktion ausblenden.

    Das könnte dann so aussehen:
    Code:
    function einblenden(spanID){
    	var spanID = document.getElementById(spanID);
    	if (einblenden.last && spanID !== einblenden.last){
    		einblenden.last.style.display = "none";
    	}
    	
    	if (spanID.style.display == 'none') {
    		spanID.style.display = 'block';
    		einblenden.last = spanID;
    	}
    	else {
    		spanID.style.display = 'none';
    		einblenden.last = null;
    	}
    }
    - ungetestet.

  6. #6
    Steffi_88 ist offline Grünschnabel
    registriert
    12-09-2013
    Beiträge
    4

    AW: Mehrere Divs übereinander stapeln

    Danke für eure Tipps!

    Die Option mit dem .last habe ich nocht nicht gekannt, das werde ich auf jeden Fall ausprobieren und in meinen Code einbinden

  7. #7
    j-l-n Guest

    AW: Mehrere Divs übereinander stapeln

    Zitat Zitat von Steffi_88 Beitrag anzeigen

    Die Option mit dem .last habe ich nocht nicht gekannt, das werde ich auf jeden Fall ausprobieren und in meinen Code einbinden
    Ja, gute Idee.

  8. #8
    Steffi_88 ist offline Grünschnabel
    registriert
    12-09-2013
    Beiträge
    4

    AW: Mehrere Divs übereinander stapeln

    Habe den Code jetzt angepasst und eingebunden.
    Das hat super geklappt, funktioniert einwandfrei!

    Vielen Dank für die tolle Unterstützung

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Mehrere Divs übereinander stapeln

    Bitte - gern geschehen.

Ähnliche Themen

  1. Mehrere Divs mit einem Klick öffnen
    Von WSP im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 01-09-2009, 11:35
  2. mehrere divs gleichzeitig ändern
    Von franks im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 17-04-2008, 20:52
  3. [CSS] in runden Ecken mehrere divs floaten
    Von Schneider im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 06-02-2007, 14:14
  4. Divs übereinander
    Von javascriptkidie im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 25-10-2005, 21:01
  5. Welmeister im Becher stapeln !
    Von epid im Forum Fun
    Antworten: 2
    Letzter Beitrag: 31-07-2004, 13:30

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •