jQuery: Komplettes DIV mit enthaltenem Link anklickbar machen

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