Buat div menjadi tautan

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.

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

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.

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

Membutuhkan sedikit javascript. Tapi, Anda divbisa diklik.

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

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/

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.

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.

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>

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>

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>

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

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!

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.

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>

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.

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/

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

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

Ini bekerja untuk saya:

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

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>

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

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

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.

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>

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>

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> 

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,

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