jquery: das jeweils nächste Element ansprechen

Ich weiß die Überschrift klingt etwas seltsam, aber ich muss das hier jetzt mal posten, weil ich heute meine ersten erfolgreichen Schritte mit dem jquery Javascript Framework gegangen bin.

Das Problem

Ich wollte in einer Reihe von abwechselnden <a> und <div> Elementen bei mouseover auf dem <a> das  folgende <div> Element einblenden und bei mouseout wieder ausblenden. Standardmäßg ist das <div> bereits ausgeblendet.

Folgende HTML-Struktur liegt zugrunde:

<a href="#1">link</a>
<div class="box">erste box</div>
<a href="#2">link2</a>
<div class="box">2te Box</div>
<a href="#3">link3</a>
<div class="box">3te box</div>

Die Lösung

Nach einigem Rumprobieren und nicht zuletzt durch die Hilfe von Christian kam ich auf folgenden jquery Code, der sich nach einem <a> das jeweils nächste <div> sucht und es bei einem Event (in meinem Falle mouseover und mouseout) entsprechend verändert.

$(document).ready(function(){
/* Blendet alle <div> Elemente aus */
$("div").hide();
/* Nach jedem <a> wird das folgende <div> wieder sichtbar */
$("a").mouseover(function(){
$(this).next("div").show();
return false;
});
/* Nachdem der Mauszeiger das <a> verlässt wird das <div> wieder unsichtbar */
$("a").mouseout(function(){
$(this).next("div").hide();
return false;
});
});

Allgemein zu jquery

Die für dieses Beispiel genutzte jquery Version ist die momentan aktuelle 1.2.6. Da ich nicht davon ausgehen kann, dass jeder der das hier liest, schonmal mit jquery gearbeitet hat, hier noch ein paar Hinweise.

Für das korrekte Funktionieren muss…

  • das jquery Framework im Head per <script> eingebunden sein.
  • der Beispielcode entweder im HTML in einem <script> Element  stehen, oder ausgelagert als .js Datei eingebunden sein.

Hier findet ihr eine Demo des Scripts

« Google Pagerank Update September 2008     Nachteile eines Macs… »

5 Kommentare

  1. Gravatar von Daniel Hepper   Daniel Hepper
      schrieb am 8. Oktober 2008

    Das ganze kannst du (zumindest für FF) auch ohne JavaScript, nur mit CSS lösen.

    Dazu mußt du das HTML leicht anpassen:
    link
    erste Box
    link
    zweite Box

    Das CSS sieht so aus:
    li div {
    display:none
    }
    li:hover div {
    display:block
    }

    Aber da es mit IE6 so scheinbar nicht klappt ist JavaScript wohl doch das Mittel der Wahl.

  2. Gravatar von Moritz Gießmann   Moritz Gießmann
      schrieb am 8. Oktober 2008

    Daran hab ich garnicht gedacht. Nur hat diese Lösung, wie du schon geschrieben hast das Problem, dass sie nicht überall funktioniert und ist daher ungeeignet.

  3. Gravatar von Christian   Christian
      schrieb am 10. Oktober 2008

    Sehe gerade:
    Das „return false“ kann im Beispiel oben rausfallen, da mouseover- und mouseout-Events (anders als z.B. ein click-Event) bei Links (oder generell?) keine Default Action auslösen.

    Viel Spaß noch in der Schule heute wünsche ich dir, den du jetzt im Moment sicher gerade hast, hehe…! ;-)

  4. Gravatar von fwolf   fwolf
      schrieb am 15. Oktober 2008

    Zwei Tipps:

    1. Verwende hover().
    2. Visual jQuery ist ne große Hilfe in Sachen „fix was nachschlagen in Bezug auf jQuery“ ;)

    cu, w0lf.

  5. Gravatar von deinemudder   deinemudder
      schrieb am 25. Mai 2012

    ich krieg nach 10 sec kopfschmerzen bei den farben auf der seite hier

Some rights reserved 2005-2017  Moritz Gießmann
Die Inhalte (Texte / Fotos) des Weblogs werden, sofern nicht anders angegeben, unter der Creative Commons Lizenz veröffentlicht.
http://www.dead-pixel.de läuft mit WordPress