Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 16

Thema: Mehrere DIV - Container über mehrere Buttons anzeigen / verstecken

  1. #1
    Neuer Benutzer
    Registriert seit
    06.06.2012
    Beiträge
    27

    Mehrere DIV - Container über mehrere Buttons anzeigen / verstecken

    Hallo,

    bisher habe ich z.B. 4 DIV Container über 4 Buttons so anzeigen bzw verstecken lassen:

    $(document).ready(function(){
    $("#button_eins").click(function(){
    $("#container_zwei").hide();
    $("#container_drei").hide();
    $("#container_vier").hide();
    $("#container_eins").fadeToggle(1500);
    });
    });

    Ich würde es aber gerne so machen:"Wenn Klick auf Button 1 öffne DIV 1 und verstecke das DIV welches gerade angezeigt wird (falls eins angezeigt wird),
    wenn Klick auf Button 2 öffne DIV 2 und verstecke das DIV welches gerade angezeigt wird (falls eins angezeigt wird) usw bis Button 4.
    Hat da jemand einen Tip für mich?

    Gruß,
    Matze

  2. #2
    Erfahrener Benutzer
    Registriert seit
    14.09.2010
    Beiträge
    202
    try this:
    Code:
    $(document).ready(function(){
    $('[id^=container]').hide();
    $('[id^=button]').click(function(){
    tmp_id = $(this).attr("id").split("_")[1];
    $('[id^=container]').hide();
    $('#container_'+tmp_id).show();
    });
    })

  3. #3
    Neuer Benutzer
    Registriert seit
    06.06.2012
    Beiträge
    27
    Hallo, OK danke für die schnelle Hilfe, funktioniert perfekt!
    Das Script habe ich soweit verstanden (bin jQuery Anfänger), nur was bedeutet: [id^=container] und wo befindet sich das ^ auf der Tastatur und ich habe nicht wirklich rausgefunden wofür das .attr ist...
    Geändert von Matze123 (10.10.2012 um 18:48 Uhr)

  4. #4
    Moderator
    Registriert seit
    08.10.2010
    Beiträge
    1.369
    [] umklammert einen sogenannten Attribut-Selektor. ^= bedeutet "beginnt mit" und das ^ befindet sich links oben, direkt unterhalb von ESC :-)

    [id^=container] liest sich also so: Selektiere alle Elemente, bei denen das id-Attribut mit "container" beginnt.

    .attr() ist die jQuery-Methode, die vom aktuellen Element den Wert eines bestimmten Attributs ermittelt.
    Beispiel:
    Code:
    <img src="meinbild.jpg" id="meinbild" />
    
    var mySrc = $('#meinbild').attr('src');
    // ergibt mySrc == "meinbild.jpg"

  5. #5
    Neuer Benutzer
    Registriert seit
    06.06.2012
    Beiträge
    27
    Ahhhh, alles klar, danke für den Durchblick!

    Eine Frage noch zum Script von rminde, Zeile 2 und Zeile 5 sind identisch. Also könnte doch Zeile gestrichen werden - oder?

  6. #6
    Moderator
    Registriert seit
    08.10.2010
    Beiträge
    1.369
    Nein

    Die erste Zeile steht direkt am Anfang von $(document).ready() und blendet beim Seitenstart alle Elemente aus, deren id Attribute mit "container" beginnt.

    Die zweite Zeile steht innerhalb des .click()-Events. Bei diesem Click-Event wird ein bestimmtes Element eingeblendet und alle anderen ausgeblendet. Dieses Ausblenden ist die "doppelte" Zeile und ist notwendig, weil ansonsten das beim vorherigen Klick eingeblendete Element nie mehr ausgeblendet würde.

  7. #7
    Neuer Benutzer
    Registriert seit
    06.06.2012
    Beiträge
    27
    Ah OK, alles klaro, ich hatte die DIVs alle am Anfang auf hide daher funktionierte es auch ohne die 2. Zeile...

  8. #8
    Neuer Benutzer
    Registriert seit
    06.06.2012
    Beiträge
    27
    Hallo,
    ich habe das Script heute auf der Arbeit mal getestet ua. im Firefox 6 (bin bei DHL, da ist das Teil ua.tatsächlich noch drauf...) auf jeden Fall funktioniert es da nicht.
    Wenn ich den einzelnen DIVs ein display:none als Style zuweise bekomme ich keinen DIV Container mehr angezeigt nach dem ich den jeweiligen Button angeklickt habe, wenn ich display:none rausnehme bekomme ich alle DIVs untereinander gleichzeitig angezeigt und auf einen Button wird gar nicht reagiert... Ist der Firefox 6 nicht jQuery-tauglich?

  9. #9
    Neuer Benutzer
    Registriert seit
    06.06.2012
    Beiträge
    27
    OK, lag am erst zu aktivierenden JS...
    Ich hätte mal ne Frage zu folgender Website. Dort sliden die einzelnen DIVs ja beim Klick auf einen Button nach oben, beim Klick auf einen anderen Butten erst wieder nach unten bevor nach kurzer Pause das neue DIV nach oben slided. Hat evtl. jemand einen kleinen Denkanstoß wie sowas bewerkstelligt wird?

  10. #10
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.693
    Geändert von s4ty (25.10.2012 um 00:35 Uhr)

Seite 1 von 2 12 LetzteLetzte

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

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