Ergebnis 1 bis 8 von 8
  1. #1
    trolln1 ist offline Grünschnabel
    registriert
    23-08-2014
    Beiträge
    3

    jquery altes element ausblenden -> neues einblenden

    Hallo, ich bin neu hier und habe gleich eine Frage:
    Ich möchte erreichen, dass wenn man auf einen Link inenrhalb eines DIVs klickt, dieses DIV nicht mehr dargestellt wird und dafür ein anderes. Hierfür habe ich Example2 aus
    Simple jQuery: Hide/Show elements with .toggle() and .slidetoggle() | Rija Media Blog
    befolgt.
    Ich habe im <head> Bereich jquery extern eingebunden:

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    und folgendes script zum togglen zwischen 2 DIVs mit jeweils der Klasse da-slider:

    Code:
    <script type="text/javascript">
    
    $('#da-link').click(function() {
    
        $('.da-slider').toggle();
    
        return false;
    
    });
    
           </script>
    im HTML sieht es dann so aus:

    HTML-Code:
     <div id="da-slider" class="da-slider">
                                   <div class="da-slide">
                                           <h2>Die Wahrheit kommt <br>ans Licht</h2>
                                            <p>dasd</p>
    
                                           <a class="da-link" href="#da-slider2" id="da-link">Simple Div Toggle</a>
                                         <div class="da-img"><img src="img/szene1/01.jpg" alt="image01" /></div>
                                    </div>
    
                                    <nav class="da-arrows">
                                            <span class="da-arrows-prev"></span>
                                            <span class="da-arrows-next"></span>
                                    </nav>
                            </div>
            <div id="da-slider2" class="da-slider"  style="display:none;">
                                 <div class="da-slide">
                                            <h2>hmmmm<br>ans Licht</h2>
                                            <p>dasd</p>
                                            <div class="da-img"><img src="img/szene1/01.jpg" alt="image01" /></div>
                                    </div>
    
                                    <nav class="da-arrows">
                                            <span class="da-arrows-prev"></span>
                                            <span class="da-arrows-next"></span>
                                    </nav>
                            </div>
    Das Problem nun ist: Wenn ich auf den Link mit Text "Simple Div Toggle" klicke, erscheint nicht das zweite Div und das alte bleibt stehen.
    Der Einsatz ist auf dieser Seite zu finden:
    She is the Truth is a Crime
    Geändert von trolln1 (23-08-2014 um 15:04 Uhr)

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

    AW: jquery altes element ausblenden -> neues einblenden

    IDs müssen dokumentenweit eindeutig sein. Du darfst die nicht wiederverwenden.

    Aber was ist denn genau dein Problem? Bzw. was genau funktioniert nicht so, wie du es gerne hättest.

  3. #3
    trolln1 ist offline Grünschnabel
    registriert
    23-08-2014
    Beiträge
    3

    AW: jquery altes element ausblenden -> neues einblenden

    Danke kkapsner, habe jetzt dem zweiten Div ne andere ID zugewiesen und den Link darauf verwiesen, klappt leider immer noch nicht. Ich möchte, dass wenn man auf den Link klickt das Div verschwindet und das 2. Div mit id "da-slide2" erscheint.
    Der Code ist wie oben geschrieben jetzt auf dieser Seite: She is the Truth is a Crime

    P.S.: Wo ist meine Frage hin?
    Geändert von trolln1 (23-08-2014 um 15:17 Uhr)

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

    AW: jquery altes element ausblenden -> neues einblenden

    Ah... klassischer Fehler. Du versuchst den onclick-Eventlistener auf dem Link zu registrieren, bevor der überhaupt vorhanden ist.

    Entweder du packst das <script> direkt vor das </body> oder du packst deinen Code in ein $(document).ready(function(){ ... }).

    Zitat Zitat von trolln1 Beitrag anzeigen
    P.S.: Wo ist meine Frage hin?
    Gute Frage - hab' ich mir auch schon gestellt.

  5. #5
    j-l-n Guest

    AW: jquery altes element ausblenden -> neues einblenden

    Vermutlich muss der Post wieder freigegeben werden? Hatten wir ja schon öfter...

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

    AW: jquery altes element ausblenden -&gt; neues einblenden

    Hatte ich doch schon freigegeben...

    - - - Aktualisiert - - -

    Gut - dann eben noch ein Mal.

  7. #7
    trolln1 ist offline Grünschnabel
    registriert
    23-08-2014
    Beiträge
    3

    AW: jquery altes element ausblenden -> neues einblenden

    Lag wohl daran, dass ich die Frage entsprechend der Hinweise von kkapsner nochmal editiert habe...

    Cool, mit dem js-code vor </body> wird jetzt zumindest schon mal das erste DIV ausgeblendet. Das zweite hingegen erscheint nicht. Ich möchte lieber versuchen, das zweite DIV anhand seiner ID "slider2" aufzurufen, da ich später noch mehrere DIVs einbinden werde. Daher habe ich den js-code folgendermaßen geändert:

    HTML-Code:
    $('#da-link').click(function() {
    
        $('.da-slider').toggle();
        $('#da-slider2').toggle();
    
        return false;
    
    });
    Leider wird dann wirklich nur das DIV mit der ID da-slider2 geladen, nicht die darin verschachtelten Elemente. Die sollen aber geladen werden. (<div class="da-slide"> und <div class="da-arrows">)
    Auf She is the Truth is a Crime ist wieder das jetzige Output zu sehen. Es fehlt noch der neue Inhalt...
    Geändert von trolln1 (23-08-2014 um 18:11 Uhr) Grund: HTML Tags

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

    AW: jquery altes element ausblenden -> neues einblenden

    Ich kann dein Problem nicht nachvollziehen... auf der verlinkten Seite schein alles zu funktionieren...

Ähnliche Themen

  1. [jQuery] Element linear "ausblenden"
    Von =Max= im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-03-2011, 18:23
  2. <tr> ausblenden/einblenden
    Von huan im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 13-09-2009, 16:14
  3. neues Fenster aufrufen altes schliessen
    Von saibonaut im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 15-06-2007, 09:27
  4. neues Fenster, wenn altes geschlossen wird
    Von BerndDasBrot im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 26-06-2004, 09:51
  5. Antworten: 2
    Letzter Beitrag: 13-11-2001, 13:27

Stichworte

Lesezeichen

Berechtigungen

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