22 Stimmen

jQuery: Komplettes DIV mit enthaltenem Link anklickbar machen

Frage von SmartUser | 13.05.2012 um 23:40

Ich habe mehrere DIV-Container, die Links enthalten. Ich möchte nun, dass man das gesamte DIV anklicken kann und immer der Link geöffnet wird, der in dem entsprechenden Container steht.

Hier mal ein Beispiel für meinen HTML-Code:

<div class="a"><a href="seite1.htm">Seite 1</a></div>
<div class="b"><a href="seite2.htm">Seite 2</a></div>
<div class="c"><a href="seite3.htm">Seite 3</a></div>
<div class="d"><a href="seite4.htm">Seite 4</a></div>

Wenn man also innerhalb des ersten DIV-Containers klickt, soll dem Link seite1.htm gefolgt werden, ganz so, als hätte man auf den entsprechenden Link selber geklickt.

Wie kann man das mit jQuery oder JavaScript hinbekommen?

AntwortenPositivNegativ
2Beste Antwort2 Stimmen

Benutze einfach die folgende Funktion dafür:

$(document).ready(function() {  
   $(".klickbar").click(function() {      
      window.location = $(this).find("a").attr("href");
      return false;  
   }); 
});  

Wenn du ein Element, dem die Klasse "klickbar" zugewiesen wurde, anklickst, wird die Adresse des Links, der sich innerhalb dieses Elements befindet abgefragt und die URL aufgerufen.

Natürlich könntest du statt $(".klickbar") auch $("div") verwenden. Dadurch würde aber jeder DIV-Container auf deiner Seite zum klickbaren Element, was du vermutlich nicht willst. Deswegen ist es besser eine eigene Klasse für alle klickbaren Elemente (nicht nur DIVs aufzuziehen). Diese Klasse musst du dann noch allen Elementen zuweisen, die anklickbar sind:

<div class="a klickbar"><a href="seite1.htm">1</a></div>
<div class="b klickbar"><a href="seite2.htm">2</a></div>
<div class="c klickbar"><a href="seite3.htm">3</a></div>
<div class="d klickbar"><a href="seite4.htm">4</a></div>

Ansonsten kannst du auch noch folgendes in deine CSS-Datei hineinschreiben:

.klickbar {
   cursor: pointer;
}

Damit wird auch noch im ganzen DIV-Container der Mauszeiger wie bei einem Link üblich angezeigt und der Besucher der Seite weiß direkt, wo er klicken kann.
16.05.2012 um 15:40

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

jQuery: Element ersetzen

Frage | 1 Antwort

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Was sind apt:// Links?

Frage | 1 Antwort

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.