jquery: das jeweils nächste Element ansprechen
Kommentare(4) 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
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.
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.
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…! ;-)
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.