Machen Sie aus einem Div einen Link

Ich habe einen <div>Block mit ausgefallenen visuellen Inhalten, die ich nicht ändern möchte. Ich möchte daraus einen anklickbaren Link machen.

Ich suche so etwas wie <a href="…"><div> … </div></a>, aber das ist gültiges XHTML 1.1.

Kam hierher in der Hoffnung, eine bessere Lösung als meine zu finden, aber ich mag keine der hier angebotenen. Ich denke, einige von Ihnen haben die Frage falsch verstanden. Das OP möchte, dass sich ein Div voller Inhalte wie ein Link verhält. Ein Beispiel hierfür wären Facebook-Anzeigen - wenn Sie schauen, sind sie tatsächlich das richtige Markup.

Für mich sind die No-Nos: Javascript (sollte nicht nur für einen Link benötigt werden und sehr schlechte SEO / Zugänglichkeit); ungültiges HTML.

Im Wesentlichen ist es das:

• Erstellen Sie Ihr Panel mit normalen CSS-Techniken und gültigem HTML.
• Irgendwo dort platzieren Sie einen Link, den Sie als Standardlink verwenden möchten, wenn der Benutzer auf das Bedienfeld klickt (Sie können auch andere Links haben).
• Fügen Sie in diesen Link ein leeres Span-Tag ein ( <span></span>nicht <span />- danke @Campey)
• Geben Sie die Panel-Position an: relativ

• Wenden Sie das folgende CSS auf die leere Spanne an:

  { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
  
    z-index: 1;
  
    /* fixes overlap error in IE7/8, 
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }   

  Es wird nun das Bedienfeld abdecken und da es sich in einem <A>Tag befindet, ist es ein anklickbarer Link

• Geben Sie alle anderen Links innerhalb der Bedienfeldposition an: relativ und einen geeigneten Z-Index (> 1), um sie vor den Standard-Span-Link zu bringen

Sie können den diva-Link nicht selbst erstellen, aber Sie können festlegen, dass ein <a>Tag als blockdas gleiche Verhalten fungiert, das a <div>hat.

a {
    display: block;
}

Sie können dann die Breite und Höhe darauf einstellen.

Dies ist eine alte Frage, aber ich dachte, ich würde sie beantworten, da jeder hier einige verrückte Lösungen hat. Es ist eigentlich sehr sehr einfach ...

Ein Ankertag funktioniert folgendermaßen:

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo...

<a href="whatever you want"> <div id="thediv" /> </a>

Obwohl ich nicht sicher bin, ob dies gültig ist. Wenn das der Grund für gesprochene Lösungen ist, dann entschuldige ich mich ...

Benötigt ein wenig Javascript. Aber Sie divwären anklickbar.

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

Diese Option erfordert kein empty.gif wie in der am besten bewerteten Antwort:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

Wie unter http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/ vorgeschlagen

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

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

Aber höchstwahrscheinlich wollen Sie wirklich eine haben <a> Tag als Element auf Blockebene angezeigt wird.

Ich würde nicht empfehlen, JavaScript zur Simulation eines Hyperlinks zu verwenden, da dies den Zweck der Markup-Validierung zunichte macht, die letztendlich die Zugänglichkeit fördert (das Veröffentlichen wohlgeformter Dokumente nach geeigneten semantischen Regeln minimiert die Möglichkeit, dass dasselbe Dokument von verschiedenen Browsern unterschiedlich interpretiert wird).

Es ist vorzuziehen, eine Webseite zu veröffentlichen, die nicht validiert wird, aber in allen Browsern , einschließlich solchen mit deaktiviertem JavaScript, ordnungsgemäß gerendert und funktioniert . Darüber hinaus onclickliefert die Verwendung nicht die semantischen Informationen für einen Bildschirmleser, um festzustellen, dass das div als Link fungiert.

Am saubersten wäre es, jQuery mit den in HTML eingeführten Daten-Tags zu verwenden. Mit dieser Lösung können Sie einen Link für jedes gewünschte Tag erstellen. Definieren Sie zuerst das Tag (z. B. div) mit einem Datenverbindungs-Tag:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Jetzt können Sie das Div so gestalten, wie Sie möchten. Und Sie müssen auch den Stil für das "Link" -ähnliche Verhalten erstellen:

[data-link] {
  cursor: pointer;
}

Und zum Schluss diesen jQuery-Aufruf auf die Seite setzen:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

Mit diesem Code wendet jQuery einen Klick-Listener auf jedes Tag auf der Seite an, das ein "Datenlink" -Attribut hat, und leitet zu der URL weiter, die sich im Datenlink-Attribut befindet.

Ich bin mir nicht sicher, ob dies gültig ist, aber es hat bei mir funktioniert.

Der Code :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

Damit die Antwort des Peers in IE 7 und höher funktioniert, sind einige Anpassungen erforderlich.

1. Der IE berücksichtigt den Z-Index nicht, wenn das Element keine Hintergrundfarbe hat, sodass der Link keine Teile des enthaltenen Divs mit Inhalt überlappt, sondern nur die leeren Teile. Um dies zu beheben, wird ein Hintergrund mit der Deckkraft 0 hinzugefügt.

2. Aus irgendeinem Grund schlagen IE7 und verschiedene Kompatibilitätsmodi vollständig fehl, wenn die Spanne in einem Link-Ansatz verwendet wird. Wenn der Link selbst jedoch den Stil erhält, funktioniert er einwandfrei.

.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>

Sie können auch versuchen, einen Anker zu umwickeln und dann seine Höhe und Breite so zu ändern, dass sie mit dem übergeordneten Anker identisch sind. Das funktioniert bei mir perfekt.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

warum nicht? use <a href="bla"> <div></div> </a>funktioniert gut in HTML5

Dieser Beitrag ist alt, ich weiß, aber ich musste nur das gleiche Problem beheben, da das einfache Schreiben eines normalen Link-Tags mit blockierter Anzeige nicht das gesamte Div im IE anklickbar macht. Um dieses Problem zu beheben, ist es viel einfacher, als JQuery verwenden zu müssen.

Lassen Sie uns zunächst verstehen, warum dies passiert: Der IE macht ein leeres Div nicht anklickbar, sondern nur den Text / das Bild innerhalb dieses Div / eines Tags anklickbar.

Lösung: Füllen Sie das Div mit einem Backbild und verbergen Sie es vor dem Betrachter.

Wie? Sie stellen gute Fragen, jetzt hören Sie zu. Fügen Sie diesen Hintergrundstil dem a-Tag hinzu

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

Und da haben Sie es, das ganze Div ist jetzt anklickbar. Dies war der beste Weg für mich, weil ich es für meine Fotogalerie verwende, damit der Benutzer auf eine Bildhälfte klickt, um sich nach links / rechts zu bewegen und dann auch ein kleines Bild nur für visuelle Effekte zu platzieren. also habe ich für mich sowieso das linke und das rechte bild als hintergrundbild verwendet!

Haben Sie einfach den Link im Block und erweitern Sie ihn mit jquery. Es verschlechtert sich zu 100% für jeden ohne Javascript. Dies mit HTML zu tun ist imho nicht wirklich die beste Lösung. 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>

Verwenden Sie dann jquery, um den Block anklickbar zu machen (über die Webdesigner-Wand ):

$(document).ready(function(){

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

});

Dann müssen Sie nur noch Cursor-Stile zum div hinzufügen

    #div_link:hover {cursor: pointer;}

Für Bonuspunkte wenden Sie diese Stile nur an, wenn Javascript aktiviert ist, indem Sie dem div, dem body oder was auch immer eine 'js_enabled'-Klasse hinzufügen.

Dieses Beispiel hat bei mir funktioniert:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

Das hat bei mir funktioniert:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

Dies fügt ein unsichtbares Element (die Spanne) hinzu, das Ihr gesamtes Div abdeckt und sich im Z-Index über Ihrem gesamten Div befindet. Wenn also jemand auf dieses Div klickt, wird der Klick im Wesentlichen von Ihrer unsichtbaren "Span" -Ebene abgefangen ist verbunden.

Hinweis: Wenn Sie bereits Z-Indizes für andere Elemente verwenden, stellen Sie einfach sicher, dass der Wert dieses Z-Index höher ist als alles, worauf er "über" stehen soll.

Eigentlich müssen Sie im Moment den JavaScript-Code einfügen. Überprüfen Sie dazu dieses Tutorial .

Es gibt jedoch eine schwierige Möglichkeit, dies mithilfe eines CSS-Codes zu erreichen. Sie müssen ein Ankertag in Ihrem div-Tag verschachteln und diese Eigenschaft darauf anwenden.

display:block;

Wenn Sie dies getan haben, wird der gesamte Breitenbereich anklickbar (jedoch innerhalb der Höhe des Ankertags). Wenn Sie den gesamten Div-Bereich abdecken möchten, müssen Sie die Höhe des Ankertags genau auf die Höhe des einstellen div tag, zum Beispiel:

height:60px;

Dadurch wird der gesamte Bereich anklickbar. Anschließend können Sie das Ankertag anwenden text-indent:-9999px, um das Ziel zu erreichen.

Das ist wirklich knifflig und einfach und wird nur mit CSS-Code erstellt.

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

Dies ist der beste Weg, wie auf der BBC-Website und im Guardian verwendet:

Ich habe die Technik hier gefunden: http://codepen.io/IschaGast/pen/Qjxpxo

Hier ist das 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 das 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);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></a>

Diese Arbeit für mich:

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

Sie können Ihrem div einen Link geben, indem Sie folgende Methode anwenden:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

Sie können das Element mit einem href-Tag umgeben oder jquery und use verwenden

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

Dies ist der einfachste Weg.

Angenommen, dies ist der divBlock, den ich anklickbar machen möchte:

<div class="inner_headL"></div>

Geben Sie also hrefFolgendes ein:

<a href="#">
 <div class="inner_headL"></div>
</a>

Betrachten Sie den divBlock einfach als normales HTML-Element und aktivieren Sie das übliche hrefTag.
Es funktioniert zumindest auf FF.

Obwohl ich dies unter keinen Umständen empfehle, ist hier ein Code, der einen DIV zu einem Link macht (Hinweis: In diesem Beispiel wird jQuery verwendet und bestimmte Markups werden der Einfachheit halber entfernt):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

Eine Option, die nicht erwähnt wurde, ist die Verwendung von Flex. Durch Anwenden flex: 1auf das aTag wird es erweitert, um in den Container zu passen.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

Ich habe eine Variable eingezogen, da sich einige Werte in meinem Link ändern, je nachdem, aus welchem ​​Datensatz der Benutzer stammt. Dies funktionierte zum Testen:

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

und das funktioniert auch:

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

Meine schicke Hose antwortet:

"Ausweichende Antwort auf:" Wie man ein Element auf Blockebene zu einem Hyperlink macht und in XHTML 1.1 validiert "

Verwenden Sie einfach HTML5 DOCTYPE DTD. "

Galt eigentlich nicht für ie7

onclick="location.href='page.html';"

Funktioniert mit IE7-9, Chrome, Safari, Firefox,

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

#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>

denke nur ein wenig über den Tellerrand hinaus ;-)