Machen Sie ein div zu einem Link

Können Sie nicht machen, das div einen link selbst, aber Sie können eine <a> tag handeln als blockdie das gleiche Verhalten ein <div> hat.

a {
    display: block;
}

Können Sie dann die Breite und Höhe auf.

InformationsquelleAutor der Antwort Soviut

Erfordert ein wenig javascript.
Aber, Ihr div wäre anklickbar.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

InformationsquelleAutor der Antwort

Dies ist eine "gültige" Lösung zu erreichen, was Sie wollen.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

Aber die meisten-wahrscheinlich das, was Sie wirklich wollen, ist ein <a> tag angezeigt, als ein block-level element.

Ich würde nicht raten, mit JavaScript zu simulieren, einen hyperlink so, dass Niederlagen der Zweck der markup-Validierung, die letztlich die Förderung der Zugänglichkeit (Verlag wohlgeformte Dokumente die folgenden geeigneten semantischen Regeln, die minimiert die Möglichkeit, das gleiche Dokument interpretiert werden unterschiedlich von verschiedenen Browsern).

Wäre es besser, eine Webseite veröffentlichen, die nicht validieren, aber rendert und funktioniert einwandfrei auf allen Browserndarunter auch solche, die mit JavaScript deaktiviert. Außerdem, mit onclick nicht die semantischen Informationen, die für einen screen-reader, um festzustellen, dass das div-Element funktionieren wie ein link.

InformationsquelleAutor der Antwort Calvin

Machen thepeer Antwort funktioniert im IE 7 und vorwärts, es braucht noch ein paar tweaks.

1. IE nicht Ehren, z-index, wenn das element hat keine hintergrund-Farbe, so dass der link nicht überlappen Teile der containig div, Inhalt, nur der leere Teile. Um dies zu beheben einen hintergrund Hinzugefügt, mit Deckkraft 0.

2. Aus irgendeinem Grund IE7 und verschiedenen Kompatibilitäts-Modi komplett Versagen, wenn Sie mit den span im link-Ansatz. Allerdings, wenn der link selbst ist angesichts der style funktioniert es Prima.

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

InformationsquelleAutor der Antwort Thomas Scheelhardt

Dieser post ist Alt ich weiß, aber ich war einfach fix hatte das gleiche Problem, da einfach mit einem normalen link-tag mit der Anzeige festlegen, zu blockieren nicht den ganzen div anklickbar im IE. so beheben Sie dieses Problem viel einfacher als mit JQuery verwenden.

Zunächst lassen Sie uns zu verstehen, warum dies geschieht: das heißt nicht ein leeres div-anklickbare es nur die text/Bild in diesem div - /ein-tag anklickbar.

Lösung: Füllen Sie das div mit bakground Bild und blenden Sie es aus dem viewer.

Wie?
Sie Fragen gute Fragen, hören Sie jetzt auf.
fügen Sie diese hintergrund-Stil, um das a-tag

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

Und dort haben Sie es die ganze div ist jetzt anklickbar. Dies war der beste Weg für mich Ursache Im mit es für mein Foto-Galerie, damit der Benutzer clik auf einer Hälfte des Bildes die Links/rechts bewegen und dann legen Sie ein kleines Bild als auch nur für visuelle Effekte. also für mich ich verwendet die linken und rechten Bilder als hintergrund Bilder sowieso!

InformationsquelleAutor der Antwort Drake

Müssen nur den link in den block und verbessern Sie mit jquery. Es baut zu 100% ordnungsgemäß für jedermann ohne javascript. Sie tun dies mit html nicht wirklich die beste Lösung imho.
Zum Beispiel:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Dann jquery verwenden, um den block anklickbar (über web designer wall):

$(document).ready(function(){

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

});

Dann alles, was Sie tun müssen ist, fügen Sie cursor-Stile auf die div

    #div_link:hover {cursor: pointer;}

Für bonus-Punkte gelten nur für diese Stile, wenn javascript aktiviert ist, indem es einen 'js_enabled' class für das div, oder der Körper, oder was auch immer.

InformationsquelleAutor der Antwort Justin

Eigentlich müssen Sie den JavaScript-code im moment
überprüfen Sie dieses tutorial zu tun.

aber es ist eine schwierige Art und Weise zu erreichen, dies mit einem CSS-code
Sie müssen nest ein Anker-tag innerhalb deines div-tag und Sie müssen diese Eigenschaft,

display:block;

wenn Sie das getan haben,es wird die ganze Breite Bereich anklickbar machen (aber in der Höhe des anchor-tag),wenn Sie wollen, decken wir das gesamte div-Bereich müssen Sie festlegen, dass die Höhe des Anker-Tags genau die Höhe des div-tag zum Beispiel:

height:60px;

dies ist gonna make die ganze Fläche klickbar,dann können Sie text-indent:-9999px zu Anker-tag um das Ziel zu erreichen.

dies ist wirklich schwierig und einfach-es ist einfach erstellt mit CSS-code.

hier ist ein Beispiel: http://jsfiddle.net/hbirjand/RG8wW/

InformationsquelleAutor der Antwort Hbirjand

Diese Arbeit für mich:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

InformationsquelleAutor der Antwort DejanR

Sie können die surround-element mit einem href-tags oder Sie können die jquery verwenden, und verwenden Sie

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

InformationsquelleAutor der Antwort THE AMAZING

Dies ist der beste Weg, es zu tun, die auf der BBC und der Guardian:

Fand ich die Technik hier:
http://codepen.io/IschaGast/pen/Qjxpxo

hier ist der html -

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

hier ist der CSS -

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

InformationsquelleAutor der Antwort jojojohn

wenn nur es könnte alles so einfach sein...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

nur ein wenig denken außerhalb der box 😉

InformationsquelleAutor der Antwort philipp