Bir bağlantıya div yapın

<div>Değiştirmek istemediğim bazı görsel içerikli bir bloğum var . Tıklanabilir bir bağlantı yapmak istiyorum.

Ben benzer bir şey arıyorum <a href="…"><div> … </div></a>, ama bu geçerli XHTML 1.1.

Bu benimki daha iyi bir çözüm bulma umuduyla buraya geldi, ama burada sunulanlardan hiç hoşlanmıyorum. Bence bazılarınız soruyu yanlış anladınız. OP, içerikle dolu bir div'in bağlantı gibi davranmasını istiyor. Bunun bir örneği facebook reklamlarıdır - bakarsanız, aslında uygun biçimlendirmedir.

Benim için no-nos: javascript (sadece bir bağlantı için gerekli olmamalı ve çok kötü SEO / erişilebilirlik); geçersiz HTML.

Özünde bu:

• Panelinizi normal CSS tekniklerini ve geçerli HTML'yi kullanarak oluşturun.
• Orada bir yerde, kullanıcı paneli tıklarsa varsayılan bağlantı olmasını istediğiniz bir bağlantı koyun (başka bağlantılara da sahip olabilirsiniz).
• Bu bağlantının içine boş bir span etiketi yerleştirin ( <span></span>değil <span />- thanks @Campey)
• panel konumunu ver: göreceli

• boş yayılma alanına aşağıdaki CSS'yi uygulayın:

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

  Şimdi paneli kaplayacak ve bir <A>etiketin içinde olduğu için tıklanabilir bir bağlantı

• panel konumu içindeki diğer bağlantıları verin: göreli ve varsayılan açıklık bağlantısının önüne getirmek için uygun bir z-endeksi (> 1)

Sen yapamaz divbir bağlantı kendisi, ancak bir yapabilirsiniz <a>bir şekilde etiket eylemi block, bir aynı davranışı <div>vardır.

a {
    display: block;
}

Daha sonra üzerinde genişliği ve yüksekliği ayarlayabilirsiniz.

Bu eski bir soru, ama burada herkesin çılgın çözümleri olduğu için cevaplayacağımı düşündüm. Aslında çok çok basit ...

Bir bağlantı etiketi şu şekilde çalışır -

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

Sooo ...

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

Bunun geçerli olup olmadığından emin olmasam da. Sözlü çözümlerin ardındaki sebep buysa, özür dilerim ...

Biraz javascript gerektirir. Ancak, divtıklanabilir olursunuz .

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

Bu seçenek, en çok oylanan cevapta olduğu gibi empty.gif gerektirmez:

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

Http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/ adresinde önerildiği gibi

Bu, istediğinizi başarmak için "geçerli" bir çözümdür.

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

Ancak büyük olasılıkla gerçekten istediğiniz bir <a>etiketin blok düzeyinde bir öğe olarak gösterilmesidir.

Sonuçta erişilebilirliği artırmak için biçimlendirme doğrulamasının amacını bozduğu için bir köprüyü simüle etmek için JavaScript'i kullanmanızı tavsiye etmem (uygun semantik kurallara göre iyi biçimlendirilmiş belgeler yayınlamak, aynı belgenin farklı tarayıcılar tarafından farklı yorumlanması olasılığını en aza indirir).

Doğrulamayan ancak JavaScript devre dışı olanlar da dahil olmak üzere tüm tarayıcılarda düzgün bir şekilde görüntülenen ve çalışan bir web sayfası yayınlamak tercih edilir . Ayrıca, kullanmak onclick, div'in bir bağlantı olarak işlev gördüğünü belirlemek için bir ekran okuyucusuna semantik bilgi sağlamaz.

En temiz yol, jQuery'yi HTML'de sunulan veri etiketleriyle kullanmaktır. Bu çözüm ile istediğiniz her etikette bir bağlantı oluşturabilirsiniz. Önce etiketi (ör. Div) veri bağlantısı etiketi ile tanımlayın:

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

Şimdi div'ı istediğiniz gibi biçimlendirebilirsiniz. Ve "link" benzeri davranışlar için de bir stil yaratmalısınız:

[data-link] {
  cursor: pointer;
}

Ve sonunda bu jQuery çağrısını sayfaya koyun:

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

Bu kodla jQuery, sayfadaki "data-link" özelliğine sahip her etikete bir tıklama dinleyici uygular ve data-link özelliğinde bulunan URL'ye yönlendirir.

Bunun geçerli olup olmadığından emin değilim ama benim için çalıştı.

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>

IE 7'de ve ileriye doğru yanıtın çalışmasını sağlamak için birkaç değişiklik gerekiyor.

1. Öğenin arka plan rengi yoksa IE, z-dizinini onurlandırmaz, bu nedenle bağlantı, içeriğe sahip içeren içeren div bölümlerinin, yalnızca boş bölümlerin üzerine gelmez. Bunu düzeltmek için opaklık 0 ile bir arka plan eklenir.

2. Nedense, bağlantı yaklaşımında span kullanılırken IE7 ve çeşitli uyumluluk modları tamamen başarısız olur. Ancak bağlantının kendisine stil verilirse gayet iyi çalışır.

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

bir çapayı sararak, daha sonra yüksekliğini ve genişliğini ebeveyni ile aynı olacak şekilde çevirerek de deneyebilirsiniz. Bu benim için mükemmel.

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

neden olmasın? use <a href="bla"> <div></div> </a>HTML5'te iyi çalışıyor

Bu yazı Old biliyorum Biliyorum ama sadece aynı sorunu düzeltmek zorunda kaldım çünkü ekran bloğuyla normal bir bağlantı etiketi yazmak IE'de tüm div tıklanabilir yapmaz. bu sorunu JQuery kullanmaktan çok daha basit bir şekilde düzeltmek için.

Öncelikle bunun neden olduğunu anlamalıyız: IE boş bir div tıklanabilir yapmaz sadece div / etiket içindeki metni / resmi tıklanabilir yapar.

Çözüm: Div'yi bir bankamatik görüntüsüyle doldurun ve görüntüleyiciden gizleyin.

Nasıl? İyi sorular sordunuz, şimdi dinleyin. bu artalanları stilini etikete ekle

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

Ve işte tüm div şimdi tıklanabilir. Bu benim için en iyi yoldu çünkü fotoğraf galerim için kullanıyorum, kullanıcının görüntünün yarısında clik'in sola / sağa hareket etmesine izin vermek ve daha sonra sadece görsel efektler için küçük bir görüntü yerleştirmek. bu yüzden benim için sol ve sağ görüntüleri arka plan görüntüleri olarak kullandım!

Sadece blokta bağlantı var ve jquery ile geliştirin. Javascript olmayan herkes için% 100 incelikle düşer. Bunu html ile yapmak gerçekten en iyi çözüm imho değildir. Örneğin:

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

Sonra bloğu tıklanabilir hale getirmek için jquery kullanın ( web tasarım duvarı üzerinden ):

$(document).ready(function(){

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

});

Sonra tek yapmanız gereken div'a imleç stilleri eklemek

    #div_link:hover {cursor: pointer;}

Bonus puanlar için bu stilleri yalnızca div, gövde veya herhangi bir şeye 'js_enabled' sınıfı ekleyerek javascript etkinleştirildiyse uygulayın.

Bu örnek benim için çalıştı:

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

Bu benim için çalıştı:

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

Bu, tüm div kapsayan görünmez bir eleman (yayılma), ekler ve bir yukarıda birisi tıklama bu div üzerinde, tıklama aslında sizin görünmez "yayılma" katmanı tarafından kesilmektedir böylece zaman, z-endeksi senin tüm div hangi bağlantılı.

Not: Zaten diğer öğeler için z-endeksleri kullanıyorsanız, bu z-endeksinin değerinin "üstünde" kalmasını istediğiniz her şeyden daha yüksek olduğundan emin olun.

Aslında şu anda JavaScript kodunu eklemeniz gerekiyor, bunu yapmak için bu eğiticiyi kontrol edin .

ancak bunu bir CSS kodu kullanarak başarmanın zor bir yolu var, div etiketinizin içine bir tutturucu etiketi yerleştirmeniz ve bu özelliği buna uygulamanız gerekir,

display:block;

Bunu yaptığınızda, tüm genişlik alanını tıklanabilir hale getirecektir (ancak bağlantı etiketinin yüksekliği dahilinde), tüm div alanını kaplamak istiyorsanız, bağlantı etiketinin yüksekliğini tam olarak div etiketi, örneğin:

height:60px;

bu, tüm alanı tıklanabilir hale getirecektir, o zaman text-indent:-9999pxhedefe ulaşmak için çapa etiketine başvurabilirsiniz .

bu gerçekten zor ve basit ve sadece CSS kodu kullanılarak oluşturuldu.

işte bir örnek : http://jsfiddle.net/hbirjand/RG8wW/

BBC web sitesinde ve Guardian'da kullanıldığı gibi bunu yapmanın en iyi yolu budur:

Tekniği burada buldum: http://codepen.io/IschaGast/pen/Qjxpxo

html heres

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

CSS heres

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

Bu iş benim için:

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

Aşağıdaki yöntemle div'inize bir bağlantı verebilirsiniz:

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

Bir href etiketleriyle öğeyi çevreleyebilir veya jquery ve

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

Bu en basit yol.

Diyelim ki, bu divtıklanabilir yapmak istediğim blok:

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

Öyleyse a'yı hrefaşağıdaki gibi koyun :

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

divBloğu normal bir html öğesi olarak düşünün ve normal hrefetiketi etkinleştirin .
En azından FF üzerinde çalışır.

Ben hiçbir koşulda bunu tavsiye etmese de, burada bir bağlantı içine bir DIV yapan bazı kod (not: bu örnek jQuery kullanır ve belirli biçimlendirme basitlik için kaldırılır):

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

Bahsedilmemiş bir seçenek flex kullanmaktır. Uygulayarak flex: 1için aetiketi, bu kabı sığacak şekilde genişler.

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

a {
  flex: 1;
}

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

Bağlantımdaki bazı değerler kullanıcının geldiği kayda göre değişeceği için bir değişkeni çektim. Bu test için çalıştı:

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

ve bu da işe yarıyor:

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

Benim smarty pantolonum cevap:

"Kaçınılması gereken cevap:" Blok düzeyinde eleman nasıl köprü yapılır ve XHTML 1.1'de doğrulanır "

Sadece HTML5 DOCTYPE DTD kullanın. "

Yani ie7 için doğru değildi

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

IE7-9, Chrome, Safari, Firefox,

eğer her şey bu kadar basit olsaydı ...

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

sadece kutunun dışında biraz düşünün ;-)