Buat div menjadi tautan


545

Saya memiliki <div>blok dengan beberapa konten visual mewah yang tidak ingin saya ubah. Saya ingin menjadikannya tautan yang dapat diklik.

Saya mencari sesuatu seperti <a href="…"><div> … </div></a>, tapi itu valid XHTML 1.1.


79
satu alasan yang bagus adalah gambar latar belakang di div
Simon_Weaver

1
Saya memiliki contoh kerja yang baik berdasarkan jawaban yang paling banyak dipilih. Periksa biola di sini
Mike

7
Dalam HTML5 itu sangat valid untuk memiliki di divbawah a.
Juan A. Navarro

Jawaban:


739

Datang ke sini dengan harapan menemukan solusi yang lebih baik milik saya, tapi saya tidak suka yang ditawarkan di sini. Saya pikir beberapa dari Anda salah memahami pertanyaan itu. OP ingin membuat div yang penuh dengan konten berperilaku seperti tautan. Salah satu contohnya adalah iklan facebook - jika Anda melihatnya, itu sebenarnya markup yang tepat.

Bagi saya no-nos adalah: javascript (seharusnya tidak diperlukan hanya untuk tautan, dan SEO / aksesibilitas yang sangat buruk); HTML tidak valid.

Intinya begini:

  • Buat panel Anda menggunakan teknik CSS normal dan HTML yang valid.
  • Di suatu tempat di sana taruh tautan yang Anda ingin menjadi tautan default jika pengguna mengklik pada panel (Anda juga dapat memiliki tautan lain).
  • Di dalam tautan itu, beri tag rentang kosong ( <span></span>, tidak <span />- terima kasih @Campey)
  • berikan posisi panel: relatif
  • terapkan CSS berikut ke rentang kosong:

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

    Sekarang akan menutupi panel, dan karena di dalam <A>tag, itu adalah tautan yang dapat diklik

  • berikan tautan lain di dalam posisi panel: relatif dan indeks-z yang sesuai (> 1) untuk membawanya di depan tautan rentang default

11
Terima kasih, bekerja dengan baik. Jika semuanya rusak parah (seperti yang terjadi pada saya) di IE8, pastikan Anda memiliki tag rentang pembukaan dan penutupan (<span ...> </span>), alih-alih rentang kosong (<span ... /> ).
Campey

1
Kode tidak bekerja sepenuhnya di IE7 / 8, elemen lain yang dapat dipilih diutamakan dari <a><span></span></a>elemen. Yaitu gambar dan teks di dalam wadah tidak akan ditautkan bahkan jika indeks-z diatur.
Spoike

67
Seorang biola bagi orang-orang yang bodoh seperti saya dan salah membaca sesuatu sehingga harus bermain-main dengannya: jsfiddle.net/hf75B/1
AlexMA

7
Sudahkah Anda mencoba ini di IE9? Saya suka metode ini, dan saya menggunakannya, tapi saya baru saja mengujinya (termasuk biola dari @AlexMA) di IE9, dan yang saya lihat adalah Anda bisa mengklik di mana saja di div KECUALI pada teks. Ketika Anda mengarahkan kursor ke teks, kursor berubah menjadi kursor teks standar dan tidak ada artinya ketika Anda mengklik teks tersebut. Karena pengguna cenderung mengklik elemen teks (dan ketika elemen teks mengisi sebagian besar div), itu membuat solusi ini tidak dapat digunakan di IE9. Adakah orang lain yang mengalami ini atau punya solusi?
bigmac

2
Apakah ada yang tahu bagaimana caranya: melayang-layang css bekerja dengan solusi ini? Mungkin merujuk jawaban yang dimasukkan ke biola?
nktokyo

252

Anda tidak dapat membuat divtautan itu sendiri, tetapi Anda dapat membuat <a>tag bertindak sebagai block, perilaku yang sama dengan yang <div>dimiliki.

a {
    display: block;
}

Anda kemudian dapat mengatur lebar dan tinggi di atasnya.


11
Namun, ini tidak membuat 'div' menjadi tautan. Itu membuat tautan menjadi elemen blok. Agak berbeda.
jjnguy

1
Ini adalah solusi dari masalah Anda. Karena Anda dapat memodifikasi div dapat diklik seperti hyperlink, tetapi Anda tidak dapat mengatur kursor (= tangan) untuk tampilan di semua browser (hanya IE yang mendukungnya!).
Soul_Master

3
jjnguy: Bagaimana? Saya tidak suka memiliki banyak konten dalam tautan, tetapi ini bisa juga menjadi bagian dari menu navigasi atau sesuatu seperti itu. Elemen jangkar (<a>) tidak harus berupa teks biasa, bukan? Dengan cara apa salah membuatnya menjadi balok? Secara semantik benar dan dapat digunakan untuk menampilkannya seperti yang Anda inginkan.
Arve Systad

23
Ini adalah solusi yang sangat valid untuk pertanyaan yang tidak jelas. Anda sebenarnya BISA hanya membungkus elemen jangkar di sekitar div, tetapi itu akan secara semantik salah. (Blok elemen dalam elemen sebaris).
Traingamer

3
jjnguy: Ini adalah praktik yang cukup umum. Saya tidak mengatakan ganti div dengan tautan, tetapi oleh suara pertanyaan dia hanya ingin blok dia bisa mengklik seperti tombol atau sesuatu.
Soviut

72

Ini adalah pertanyaan kuno, tetapi saya pikir saya akan menjawabnya karena semua orang di sini memiliki beberapa solusi gila. Ini sebenarnya sangat sangat sederhana ...

Tag anchor berfungsi seperti ini -

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

Sooo ...

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

Meskipun saya tidak yakin apakah ini valid. Jika itu alasan di balik solusi yang diucapkan, maka saya minta maaf ...


6
Ini HTML yang valid selama <div>tidak mengandung konten interaktif ( <a>elemen lain , <button>elemen, dll.).

50
Contoh Anda bukan elemen blok HTML yang valid yang terkandung dalam elemen inline - kecuali Anda menggunakan HTML5, yang telah membuat pengecualian untuk tautan.
teman

1
Ini adalah contoh yang buruk , karena apa yang dilakukan atag adalah mengambil semua teks dalam divdan menggarisbawahinya ... ini dapat dikurangi dengan gaya, tetapi jawaban teratas lebih baik.
Dmitri Nesteruk

2
a #thediv{font-weight:normal;text-decoration:none;}adalah semua yang Anda butuhkan dari segi gaya.
tyjkenn

1
Mencoba ini dan berhasil, namun itu merusak posisi elemen. Ya doctype adalah HTML5 di Chrome (beberapa versi 2014) ..
BAR

60

Membutuhkan sedikit javascript. Tapi, Anda divbisa diklik.

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

9
Hasil dalam semantik buruk pada halaman, jadi saya akan menghindari yang satu ini meskipun secara teknis memungkinkan.
Arve Systad

2
Saya berpikir untuk menggunakan solusi ini, tetapi agak jelek. Saya suka solusi yang melibatkan tampilan: blok yang lebih baik.
allyourcode

9
Ini terlihat seperti tautan, tetapi bukan tautan yang sebenarnya. Ini memiliki masalah kegunaan dan aksesibilitas yang parah, dan merupakan solusi yang sangat buruk.
WhyNotHugo

2
Solusi terbaik. Kami hanya perlu menjalankan skrip dan mengirim "ini" ke sana.
Arman Hayots

3
Jika mereka tidak mengaktifkan js, Anda kehilangan fungsionalitas. Serta buruk untuk SEO.
BAR

40

Opsi ini tidak memerlukan kosong. Jika seperti dalam jawaban yang paling dipilih:

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

Seperti yang diusulkan di http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/


1
Terima kasih! Solusi Chris Jumonville bekerja sangat baik untuk Android dan iPhone. Contoh: gastateparks.org/specials
Loren

1
Bukankah seharusnya div.feature > akalau-kalau bagian "segalanya" juga mengandung tautan yang tersembunyi jauh di dalam?
TWiStErRob

ini harus menjadi jawaban yang dipilih, juga bekerja dengan bootstrap
Anthony Kal

23

Ini adalah solusi "valid" untuk mencapai apa yang Anda inginkan.

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

Tapi kemungkinan besar yang Anda inginkan adalah agar <a>tag ditampilkan sebagai elemen level blok.

Saya tidak akan menyarankan menggunakan JavaScript untuk mensimulasikan hyperlink karena itu mengalahkan tujuan validasi markup, yang pada akhirnya untuk mempromosikan aksesibilitas (menerbitkan dokumen yang dibentuk dengan baik mengikuti aturan semantik yang tepat meminimalkan kemungkinan dokumen yang sama akan ditafsirkan secara berbeda oleh browser yang berbeda).

Lebih baik menerbitkan halaman web yang tidak divalidasi, tetapi merender dan berfungsi dengan baik di semua browser , termasuk yang dengan JavaScript dinonaktifkan. Lebih jauh lagi, menggunakan onclicktidak memberikan informasi semantik bagi pembaca layar untuk menentukan bahwa div berfungsi sebagai tautan.


14

Cara terbersih adalah menggunakan jQuery dengan tag data yang diperkenalkan dalam HTML. Dengan solusi ini Anda dapat membuat tautan pada setiap tag yang Anda inginkan. Pertama-tama tentukan tag (mis. Div) dengan tag tautan data:

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

Sekarang Anda dapat merancang div sesuka Anda. Dan Anda harus membuat juga gaya untuk "tautan" -seperti perilaku:

[data-link] {
  cursor: pointer;
}

Dan akhirnya berikan panggilan jQuery ini ke halaman:

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

Dengan kode ini, jQuery menerapkan pendengar klik untuk setiap tag pada halaman yang memiliki atribut "data-link" dan mengarahkan ke URL yang ada dalam atribut data-link.


Untuk mendapatkan info tentang atribut data, lihat: ejohn.org/blog/html-5-data-attributes
Erhard Dinhobl

13

Tidak yakin apakah ini valid tetapi berhasil untuk saya.

Kode :

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


9

Agar jawaban thepeer bekerja di IE 7 dan maju, diperlukan beberapa penyesuaian.

  1. IE tidak akan menghormati indeks-z jika elemen tidak memiliki warna latar belakang, sehingga tautannya tidak akan tumpang tindih bagian dari contentig div yang memiliki konten, hanya bagian kosong. Untuk memperbaikinya latar belakang ditambahkan dengan opacity 0.

  2. Untuk beberapa alasan IE7 dan berbagai mode kompatibilitas benar-benar gagal saat menggunakan rentang dalam pendekatan tautan. Namun jika tautan itu sendiri diberi gaya itu berfungsi dengan baik.

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

8

Anda juga bisa mencoba dengan melilitkan jangkar, lalu memutar tinggi dan lebarnya agar sama dengan induknya. Ini bekerja dengan baik untuk saya.

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

1
Anda mungkin juga ingin memastikan div induk memiliki bantalan nol dan bahwa tag <a> memiliki margin nol.
Nilpo

4

kenapa tidak? use <a href="bla"> <div></div> </a>berfungsi dengan baik di HTML5


Itu tidak akan melewati validasi HTML. Item baris tidak dapat menyimpan item blokir.
Krzysztof Trzos

Maksud saya, itu <div><span></span></div>valid dan <span><div></div></span>tidak. Anda tidak harus memasukkan display: inline;jenis barang ke dalam display: block;barang. The <a>tag kotak inline.
Krzysztof Trzos

Ya, itu bisa berhasil, karena Anda bisa melakukannya dengan berbagai cara (lebih baik atau lebih buruk). Solusi khusus ini tidak bagus karena validasi HTML yang lebih lama :).
Krzysztof Trzos

1
Apakah penting bahwa "validasi HTML yang lebih lama" tidak lulus ini? Itu diizinkan sekarang, html5 dan karena suatu alasan jadi mengapa tidak menggunakannya? Saya pikir solusi ini baik-baik saja (sering membutuhkan penghapusan garis bawah ke konten div tetapi masih).
Todilo

@Todilo Karena sementara <a><div></div></a>valid dan berfungsi, <a><div><a></a></div></a>tidak valid dan tidak berfungsi.
coredumperror

3

Posting ini sudah lama saya tahu tetapi saya hanya harus memperbaiki masalah yang sama karena hanya menulis tag tautan normal dengan tampilan yang diatur untuk diblokir tidak membuat seluruh div dapat diklik di IE. jadi untuk memperbaiki masalah ini jauh lebih sederhana daripada harus menggunakan JQuery.

Pertama mari kita mengerti mengapa ini terjadi: IE tidak akan membuat div kosong diklik itu hanya membuat teks / gambar di dalam div itu / tag diklik.

Solusi: Isi div dengan gambar bakground dan sembunyikan dari pemirsa.

Bagaimana? Anda mengajukan pertanyaan yang bagus, sekarang dengarkan. tambahkan gaya backround ini ke tag a

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

Dan begitulah seluruh div sekarang dapat diklik. Ini adalah cara terbaik bagi saya karena saya menggunakannya untuk Galeri Foto saya untuk membiarkan pengguna menekan setengah gambar untuk bergerak ke kiri / kanan dan kemudian menempatkan gambar kecil juga hanya untuk efek visual. jadi bagi saya saya tetap menggunakan gambar kiri dan kanan sebagai gambar latar belakang!


Terima kasih! Saya perlu mensimulasikan imagemap dengan jangkar kosong di atas gambar dan IE hanya akan membiarkan Anda mengklik jika ada konten. Ini memperbaikinya.
MDCore

2

Hanya memiliki tautan di dalam blok dan tingkatkan dengan jquery. Ini menurunkan 100% anggun untuk siapa pun tanpa javascript. Melakukan ini dengan html sebenarnya bukan solusi terbaik. Sebagai contoh:

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

Kemudian gunakan jquery untuk membuat blok dapat diklik (melalui dinding desainer web ):

$(document).ready(function(){

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

});

Maka yang harus Anda lakukan adalah menambahkan gaya kursor ke div

    #div_link:hover {cursor: pointer;}

Untuk poin bonus hanya berlaku gaya ini jika javascript diaktifkan dengan menambahkan kelas 'js_enabled' ke div, atau badan, atau apa pun.


saya ingin menggunakan ini tetapi saya memiliki 2 tautan di div ... bagaimana saya bisa memodifikasinya untuk dapat mengklik kedua tautan? (saat ini membawa saya ke "mylink.html" jika saya mengklik tautan kedua juga ..)
m3tsys

2

Contoh ini berhasil bagi saya:

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

2

Ini bekerja untuk saya:

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

Ini menambahkan elemen tak terlihat (rentang), yang mencakup seluruh div Anda, dan di atas seluruh div Anda pada indeks-z, jadi ketika seseorang mengklik div itu, klik pada dasarnya dicegat oleh lapisan "span" Anda yang tidak terlihat, yang terhubung.

Catatan: Jika Anda sudah menggunakan indeks-z untuk elemen lain, pastikan nilai indeks-z ini lebih tinggi daripada apa pun yang Anda inginkan agar tetap "di atas" dari.


Bekerja untukku. Hanya saja, jangan lupa untuk relatif memposisikan elemen induk.
Saif Al Falah

1

Sebenarnya Anda perlu memasukkan kode JavaScript saat ini, periksa tutorial ini untuk melakukannya.

tetapi ada cara rumit untuk mencapai ini menggunakan kode CSS Anda harus membuat tag anchor di dalam tag div Anda dan Anda harus menerapkan properti ini padanya,

display:block;

ketika Anda sudah melakukannya, itu akan membuat seluruh area lebar dapat diklik (tetapi dalam ketinggian tag jangkar), jika Anda ingin menutupi seluruh area div Anda harus mengatur ketinggian tag jangkar tepat ke ketinggian tag div, misalnya:

height:60px;

ini akan membuat seluruh area dapat diklik, maka Anda dapat menerapkan text-indent:-9999pxtag jangkar untuk mencapai tujuan.

ini sangat rumit dan sederhana dan hanya dibuat menggunakan kode CSS.

berikut adalah contohnya : http://jsfiddle.net/hbirjand/RG8wW/


1

Ini adalah cara terbaik untuk melakukannya seperti yang digunakan di situs BBC dan Guardian:

Saya menemukan teknik di sini: http://codepen.io/IschaGast/pen/Qjxpxo

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

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


0

Ini bekerja untuk saya:

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

0

Anda dapat memberikan tautan ke div Anda dengan metode berikut:

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

0

Anda dapat mengelilingi elemen dengan tag href atau Anda dapat menggunakan jquery dan menggunakan

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

0

Ini adalah cara paling sederhana.

Katakan, ini adalah divblok yang ingin saya buat dapat diklik:

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

Jadi tuliskan hrefsebagai berikut:

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

Anggap saja divblok sebagai elemen html normal dan aktifkan hreftag biasa .
Paling tidak berfungsi pada FF.


0

Meskipun saya tidak merekomendasikan melakukan ini dalam keadaan apa pun, berikut adalah beberapa kode yang membuat DIV menjadi tautan (catatan: contoh ini menggunakan jQuery dan markup tertentu dihapus untuk kesederhanaan):

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

3
Sekali lagi, ini adalah solusi fungsional, tetapi tidak benar-benar dalam semangat pertanyaan asli yang merupakan solusi XHTML. Meskipun bukan masalah besar, jawaban Anda mulai menambah kebisingan pada pertanyaan.
Soviut

0

Opsi yang belum disebutkan adalah menggunakan flex. Dengan menerapkan flex: 1ke atag, itu meluas agar sesuai dengan wadah.

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

a {
  flex: 1;
}
<div>
  <a href="http://google.co.uk">Link</a>
</div>


-1

Saya menarik sebuah variabel karena beberapa nilai dalam tautan saya akan berubah tergantung pada catatan pengguna itu. Ini berfungsi untuk pengujian:

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

dan ini juga berfungsi:

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

1
kode tidak muncul karena alasan tertentu saya menggunakan onclick dengan variabel jsp di dalamnya untuk membuat tautan dinamis
becky

-3

Celana cerdas saya menjawab:

"Jawaban sederhana untuk:" Cara membuat elemen level blok menjadi hyperlink dan memvalidasi di XHTML 1.1 "

Cukup gunakan HTML5 DOCTYPE DTD. "

Sebenarnya tidak berlaku untuk ie7

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

Bekerja IE7-9, Chrome, Safari, Firefox,


dia mencari "Saya mencari XHTML 1.1 cara yang valid"
Mark

-4

jika semuanya bisa sesederhana ini ...

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

hanya berpikir sedikit di luar kotak ;-)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.