• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

jquery altes element ausblenden -> neues einblenden

T

trolln1

New member
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: 
 <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
 
Zuletzt bearbeitet:
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.
 
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?
 
Zuletzt bearbeitet:
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(){ ... }).

trolln1 schrieb:
P.S.: Wo ist meine Frage hin?
Zum Vergrößern anklicken....
Gute Frage - hab' ich mir auch schon gestellt.
 
Vermutlich muss der Post wieder freigegeben werden? Hatten wir ja schon öfter...
 
AW: jquery altes element ausblenden -&gt; neues einblenden

Hatte ich doch schon freigegeben...

- - - Aktualisiert - - -

Gut - dann eben noch ein Mal.
 
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: 
$('#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...
 
Zuletzt bearbeitet:
Ich kann dein Problem nicht nachvollziehen... auf der verlinkten Seite schein alles zu funktionieren...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben