Zrób div w link

545

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.

EE.
źródło
79
dobrym powodem byłby obraz tła w div
Simon_Weaver
1
Mam dobry przykład roboczy oparty na najczęściej głosowanej odpowiedzi. Sprawdź skrzypce tutaj
Mike
7
W HTML5 poprawne jest posiadanie divunder a.
Juan A. Navarro,

Odpowiedzi:

739

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
typer
źródło
11
Dzięki działa dobrze. Jeśli coś psuje się okropnie (jak dla mnie) w IE8, upewnij się, że masz otwierający i zamykający znacznik zakresu (<span ...> </span>), zamiast pustego zakresu (<span ... /> ).
Campey,
1
Kod nie działa całkowicie w IE7 / 8, inne elementy do wyboru mają pierwszeństwo przed <a><span></span></a>elementem. Tj. Obrazy i teksty wewnątrz kontenera nie będą się łączyły, nawet jeśli ustawiony jest indeks Z.
Spoike
67
Skrzypce dla ludzi, którzy są głupi jak ja i źle odczytali coś, więc musiałem się z tym trochę pobawić
AlexMA
7
Czy próbowałeś tego w IE9? Podoba mi się ta metoda i używam jej, ale właśnie ją przetestowałem (w tym skrzypce z @AlexMA) w IE9, a widzę, że możesz kliknąć w dowolnym miejscu DIV poza tekstem. Po najechaniu kursorem na tekst kursor zmienia się w standardowy kursor tekstowy i nie robi nic po kliknięciu tekstu. Ponieważ użytkownicy mają skłonność do klikania elementów tekstowych (a gdy elementy tekstowe wypełniają większość div), rozwiązanie to nie nadaje się do użycia w IE9. Czy ktoś jeszcze tego doświadczył lub ma rozwiązanie?
bigmac
2
Czy ktoś wie, jak to zrobić: hover css działa z tym rozwiązaniem? Być może odnosząc się do odpowiedzi na skrzypce?
nktokyo
251

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

Soviut
źródło
11
Jednak nie tworzy to „div” w link. To tworzy link do elementu blokowego. To jest trochę inne.
jjnguy
1
To jest rozwiązanie twojego problemu. Ponieważ możesz modyfikować div, możesz kliknąć jak hiperłącze, ale nie możesz ustawić kursora (= ręka) do wyświetlania we wszystkich przeglądarkach (tylko IE go obsługuje!).
Soul_Master
3
jjnguy: Jak? Nie lubię mieć dużo treści w linku, ale równie dobrze może to być część menu nawigacyjnego lub coś w tym rodzaju. Element kotwiczący (<a>) niekoniecznie musi być zwykłym tekstem, prawda? W jaki sposób przekształcanie go w blok jest błędem ? Jest semantycznie poprawny i może być używany do wyświetlania go tak, jak chcesz.
Arve Systad
23
Jest to całkowicie poprawne rozwiązanie niejasnego pytania. W rzeczywistości Mógłbyś po prostu owinąć element kotwicy wokół div, ale byłoby to semantycznie niepoprawne. (Blokuj element w elemencie wbudowanym).
Traingamer
3
jjnguy: To dość powszechna praktyka. Nie mówię, że zamień div na linki, ale dźwiękami pytania chciał po prostu blok, który mógłby kliknąć jak przycisk lub coś w tym rodzaju.
Soviut
72

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

Zizo47
źródło
6
Jest prawidłowym kodem HTML, o ile <div>nie zawiera żadnych interaktywnych treści (innych <a>elementów, <button>elementów itp.).
50
Twój przykład nie jest prawidłowym HTML - element blokowy zawarty w elemencie wbudowanym - chyba że używasz HTML5, który uczynił wyjątek dla łączy.
thepeer
1
To zły przykład, ponieważ to, co arobi znacznik, polega na tym, że bierze cały tekst do a divi podkreśla go ... można to złagodzić za pomocą stylizacji, ale najlepsza odpowiedź jest lepsza.
Dmitri Nesteruk
2
a #thediv{font-weight:normal;text-decoration:none;}to wszystko, czego potrzebujesz stylowo.
tyjkenn
1
Próbowałem tego i zadziałało, jednak zepsuło to pozycjonowanie elementu. Tak, doctype to HTML5 w Chrome (niektóre wersje 2014).
BAR
60

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

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
jjnguy
źródło
9
Powoduje złą semantykę na stronie, więc unikałbym tego, chociaż jest to technicznie możliwe.
Arve Systad
2
Myślałem o użyciu tego rozwiązania, ale jest to trochę brzydkie. Lubię rozwiązania dotyczące wyświetlania: blokuj lepiej.
allyourcode
9
To wygląda jak link, ale nie jest prawdziwym linkiem. Ma poważne problemy z użytecznością i dostępnością i jest naprawdę paskudnym rozwiązaniem.
WhyNotHugo
2
Najlepsze rozwiązanie Musimy tylko uruchomić skrypt i wysłać do niego „to”.
Arman Hayots
3
Jeśli nie mają włączonej js, utraciłeś funkcjonalność. A także źle wpływa na SEO.
BAR
40

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/

MagTun
źródło
1
Dzięki! Rozwiązanie Chrisa Jumonville'a działa świetnie na Andriodzie i iPhonie. Przykład: gastateparks.org/specials
Loren
1
Czy nie powinno tak być, div.feature > agdyby część „wszystko inne” zawierała również głęboko ukryty link?
TWiStErRob,
to powinna być wybrana odpowiedź, działa również z bootstrap
Anthony Kal
23

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.

Calvin
źródło
14

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.

Erhard Dinhobl
źródło
Aby uzyskać informacje na temat atrybutów danych, zobacz: ejohn.org/blog/html-5-data-attributes
Erhard
13

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>

Tim
źródło
9

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>
Thomas Scheelhardt
źródło
8

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>
wdonayredroid
źródło
1
Możesz także upewnić się, że div nadrzędny ma zerowe wypełnienie i że znacznik <a> ma zerowy margines.
Nilpo
4

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

Vamsi Pavan Mahesh
źródło
Nie przejdzie walidacji HTML. Element zamówienia nie może przechowywać elementów blokowych.
Krzysztof Trzos,
To znaczy, to <div><span></span></div>jest ważne i <span><div></div></span>nie jest. Nie należy umieszczać display: inline;rodzaju przedmiotów w display: block;przedmiotach. <a>Znacznik jest inline pudełko.
Krzysztof Trzos,
Tak, może działać, ponieważ możesz to zrobić na wiele sposobów (lepiej lub gorzej). To szczególne rozwiązanie nie jest dobre, ponieważ starsze sprawdzanie poprawności HTML :).
Krzysztof Trzos,
1
Czy to ważne, że „starsza walidacja HTML” tego nie spełnia? Jest teraz dozwolone, html5 i nie bez powodu, więc dlaczego go nie używać? Myślę, że to rozwiązanie jest w porządku (często wymaga usunięcia podkreślenia do treści div, ale nadal).
Todilo
@Todilo Ponieważ chociaż <a><div></div></a>jest poprawne i działa, <a><div><a></a></div></a>nie jest ważne i nie działa.
coredumperror
3

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.

Kaczor
źródło
Dzięki! Musiałem zasymulować mapę obrazu z pustymi kotwicami nad obrazem, a IE pozwoli ci kliknąć tylko wtedy, gdy będzie treść. To naprawiło to.
MDCore,
2

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.

Justin
źródło
Chcę tego użyć, ale mam 2 linki w div ... Jak mogę to zmienić, aby móc kliknąć oba linki? (aktualnie zabiera mnie do „mylink.html”, jeśli kliknę również drugi link ..)
m3tsys
2

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>
joan16v
źródło
2

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

Jeff Schwarting
źródło
Pracował dla mnie. Tylko nie zapomnij o względnym ustawieniu elementu nadrzędnego.
Saif Al Falah
1

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/

Hbirjand
źródło
1

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);
      }
    }
}
jojojohn
źródło
1
<a href="…" style="cursor: pointer;"><div></div></a>
Phillip Chaffee
źródło
0

Ta praca dla mnie:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>
DejanR
źródło
0

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>
Swarnamayee Mallia
źródło
0

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

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
ZACHWYCAJĄCE
źródło
0

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.

jeevanism
źródło
0

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>
Brian David Berman
źródło
3
Ponownie, jest to funkcjonalne rozwiązanie, ale nie tak naprawdę w duchu pierwotnego pytania, które dotyczyło rozwiązania XHTML. Choć nie jest to wielka sprawa, odpowiedź ma zacząć dodawać hałas na pytanie.
Soviut
0

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>

The Codesee
źródło
-1

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> 
bekliwy
źródło
1
kod nie pokazuje się z jakiegoś powodu Użyłem onclick ze zmienną jsp wewnątrz, aby utworzyć dynamiczny link
becky
-3

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,

Karl Kelman
źródło
szukał „Szukam prawidłowego sposobu na XHTML 1.1”
Mark,
-4

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

philipp
źródło