Zrób div w link

Mam <div>blok z fantazyjnymi treściami wizualnymi, których nie chcę zmieniać. Chcę, aby był to link klikalny.

Szukam czegoś takiego <a href="…"><div> … </div></a>, ale to jest poprawny XHTML 1.1.

Przybyłem tutaj w nadziei znalezienia lepszego rozwiązania niż moje, ale nie podoba mi się żadne z oferowanych tutaj. Myślę, że niektórzy z was źle zrozumieli to pytanie. OP chce, aby div pełen treści zachowywał się jak link. Jednym z przykładów mogą być reklamy na Facebooku - jeśli spojrzysz, są one właściwie właściwym znacznikiem.

Dla mnie no-nos to: javascript (nie powinien być potrzebny tylko do linku i bardzo zły SEO / dostępność); niepoprawny HTML.

Zasadniczo jest to:

• Zbuduj panel przy użyciu normalnych technik CSS i prawidłowego HTML.
• Gdzieś tam umieść link, który ma być domyślnym linkiem, jeśli użytkownik kliknie panel (możesz też mieć inne linki).
• Wewnątrz tego linku umieść pusty znacznik zakresu ( <span></span>, nie <span />- dzięki @Campey)
• podać pozycję panelu: względną

• zastosuj następujący CSS do pustego zakresu:

  { 
    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');
  }   

  Teraz obejmie panel, a ponieważ znajduje się w <A>tagu, jest klikalnym łączem

• podaj inne linki wewnątrz pozycji panelu: względny i odpowiedni indeks Z (> 1), aby umieścić je przed domyślnym linkiem rozpiętości

Nie możesz utworzyć samego divlinku, ale możesz sprawić, by <a>tag zachowywał się tak blocksamo jak zachowanie <div>.

a {
    display: block;
}

Następnie możesz ustawić na nim szerokość i wysokość.

To starożytne pytanie, ale pomyślałem, że odpowiem na to pytanie, ponieważ każdy tutaj ma jakieś szalone rozwiązania. To jest naprawdę bardzo proste ...

Tag kotwicy działa w ten sposób -

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

Sooo ...

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

Chociaż nie jestem pewien, czy to jest poprawne. Jeśli to jest uzasadnienie rozwiązań mówionych, przepraszam ...

Wymaga trochę javascript. Ale twój divbyłby klikalny.

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

Ta opcja nie wymaga pustego pliku.gif, jak w najbardziej popularnej odpowiedzi:

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 */
    }

Zgodnie z propozycją na stronie http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Jest to „prawidłowe” rozwiązanie umożliwiające osiągnięcie tego, co chcesz.

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

Ale najprawdopodobniej tak naprawdę chcesz, aby <a>znacznik był wyświetlany jako element na poziomie bloku.

Nie radziłbym używać JavaScript do symulacji hiperłącza, ponieważ nie pozwala to na sprawdzenie poprawności znaczników, a mianowicie promowanie dostępności (publikowanie dobrze sformułowanych dokumentów zgodnie z odpowiednimi regułami semantycznymi minimalizuje możliwość, że ten sam dokument będzie różnie interpretowany przez różne przeglądarki).

Najlepiej byłoby opublikować stronę internetową, która nie sprawdza poprawności, ale renderuje i działa poprawnie we wszystkich przeglądarkach , w tym z wyłączoną obsługą JavaScript. Ponadto użycie onclicknie zapewnia informacji semantycznej dla czytnika ekranu w celu ustalenia, czy div działa jako łącze.

Najczystszym sposobem byłoby użycie jQuery z tagami danych wprowadzonymi w HTML. Dzięki temu rozwiązaniu możesz utworzyć link do każdego tagu, który chcesz. Najpierw zdefiniuj tag (np. Div) za pomocą tagu łącza danych:

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

Teraz możesz dowolnie stylizować div. Musisz także stworzyć styl zachowania podobnego do „linku”:

[data-link] {
  cursor: pointer;
}

I w końcu umieść to wywołanie jQuery na stronie:

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

Za pomocą tego kodu jQuery stosuje detektor kliknięć do każdego tagu na stronie, który ma atrybut „data-link” i przekierowuje na adres URL, który znajduje się w atrybucie link do danych.

Nie jestem pewien, czy jest to poprawne, ale zadziałało dla mnie.

Kod :

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

Aby odpowiedź typupeer działała w IE 7 i nowszych wersjach, wymaga kilku poprawek.

1. IE nie honoruje indeksu Z, jeśli element nie ma koloru tła, więc link nie będzie nakładał się na części div div zawierającej zawartość, tylko puste części. Aby to naprawić, dodaje się tło z kryciem 0.

2. Z jakiegoś powodu IE7 i różne tryby zgodności całkowicie zawodzą, gdy używasz zakresu w podejściu łączącym. Jeśli jednak sam link otrzyma styl, działa dobrze.

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

możesz także spróbować owinąć kotwicę, a następnie obrócić jej wysokość i szerokość, aby były takie same jak jej rodzic. To działa dla mnie idealnie.

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

Dlaczego nie? use <a href="bla"> <div></div> </a>działa dobrze w HTML5

Ten post jest stary, wiem, ale po prostu musiałem naprawić ten sam problem, ponieważ po prostu napisanie normalnego tagu linku z ustawionym blokiem wyświetlania nie powoduje, że cały plik div można kliknąć w IE. więc rozwiązanie tego problemu jest o wiele prostsze niż korzystanie z JQuery.

Po pierwsze, pozwól nam zrozumieć, dlaczego tak się dzieje: IE nie sprawi, że pusty div klikalny, tylko tekst / obraz w tym div / tag klikalny.

Rozwiązanie: Wypełnij div obrazem bakground i ukryj go przed widzem.

W jaki sposób? Zadajesz dobre pytania, a teraz słuchaj. dodaj ten styl tła do znacznika

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

I tutaj masz, cały div jest teraz klikalny. To był dla mnie najlepszy sposób, ponieważ używam go w mojej galerii zdjęć, aby umożliwić użytkownikowi kliknięcie połowy obrazu w celu przesunięcia w lewo / w prawo, a następnie umieszczenie małego obrazu również w celu uzyskania efektów wizualnych. więc dla mnie wykorzystałem lewy i prawy obraz jako tło.

Wystarczy mieć link w bloku i wzbogacić go o jquery. To degraduje w 100% z wdziękiem dla każdego bez javascript. Robienie tego przy pomocy HTML nie jest najlepszym rozwiązaniem. Na przykład:

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

Następnie użyj jquery, aby umożliwić kliknięcie bloku (za pośrednictwem ściany projektanta stron internetowych ):

$(document).ready(function(){

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

});

Następnie wystarczy dodać style div do div

    #div_link:hover {cursor: pointer;}

W przypadku punktów bonusowych stosuj te style tylko wtedy, gdy javascript jest włączony przez dodanie klasy „js_enabled” do div, body lub cokolwiek innego.

Ten przykład działał dla mnie:

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

To działało dla mnie:

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;
}

Dodaje to niewidoczny element (rozpiętość), który pokrywa cały div i znajduje się powyżej całego div na indeksie Z, więc gdy ktoś kliknie ten div, kliknięcie jest zasadniczo przechwytywane przez twoją niewidoczną warstwę „span”, która jest połączone.

Uwaga: Jeśli już używasz indeksów Z dla innych elementów, upewnij się, że wartość tego indeksu Z jest wyższa niż cokolwiek, co chcesz, aby spoczywało „nad”.

W tej chwili musisz dołączyć kod JavaScript, sprawdź ten samouczek, aby to zrobić.

ale istnieje trudny sposób, aby to osiągnąć za pomocą kodu CSS, musisz zagnieździć tag kotwicy wewnątrz tagu div i zastosować do niego tę właściwość,

display:block;

gdy to zrobisz, klikalne będzie całe pole szerokości (ale w obrębie wysokości znacznika kotwicy), jeśli chcesz pokryć cały obszar div, musisz ustawić wysokość znacznika kotwicy dokładnie na wysokość tag div, na przykład:

height:60px;

dzięki temu cały obszar będzie klikalny, a następnie możesz zastosować text-indent:-9999pxtag zakotwiczenia, aby osiągnąć cel.

jest to naprawdę trudne i proste i zostało właśnie utworzone przy użyciu kodu CSS.

oto przykład : http://jsfiddle.net/hbirjand/RG8wW/

Jest to najlepszy sposób, aby to zrobić na stronie BBC i Guardian:

Technikę znalazłem tutaj: http://codepen.io/IschaGast/pen/Qjxpxo

oto kod 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>

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

Ta praca dla mnie:

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

Możesz podać link do swojego diva, stosując następującą metodę:

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

Możesz otoczyć element tagami href lub użyć jquery i użyć

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

To jest najprostszy sposób.

Powiedzmy, że jest to divblok, który chcę klikać:

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

Postaw więc href:

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

Po prostu uważaj divblok za normalny element HTML i włącz zwykły hreftag.
Działa przynajmniej na FF.

Chociaż nie zalecam robienia tego w żadnych okolicznościach, oto kod, który przekształca DIV w link (uwaga: w tym przykładzie użyto jQuery i pewne znaczniki zostały usunięte dla uproszczenia):

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

Opcją, o której nie wspomniano, jest użycie flex. Nakładając flex: 1na aznacznik, rozszerza się, aby pasować do pojemnika.

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

a {
  flex: 1;
}

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

Pobrałem zmienną, ponieważ niektóre wartości w moim łączu zmienią się w zależności od tego, z jakiego rekordu pochodzi użytkownik. To działało do testowania:

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

i to też działa:

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

Odpowiedzi na moje smarty spodnie:

„Wymijająca odpowiedź na:„ Jak uczynić element poziomu bloku hiperłączem i sprawdzić w XHTML 1.1 ”

Wystarczy użyć HTML5 DOCTYPE DTD ”.

W rzeczywistości nie dotyczyło to ie7

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

Działa IE7-9, Chrome, Safari, Firefox,

gdyby tylko wszystko mogło być tak proste ...

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

po prostu pomyśl trochę nieszablonowo ;-)