HTML / CSS'deki tüm div için bir href bağlantısı

İşte HTML / CSS'de yapmaya çalıştığım şey:

Farklı yükseklik ve genişliklerde görüntülerim var, ancak hepsi 180x235'in altında. Yani ne yapmak istediğinizi bir oluşturmaktır divile borderve vertical-align: middlehepsini. Ben başarılı bir şekilde yaptım ama şimdi düzgün bir href bağlantı nasıl tüm üzerinde sıkışmış div.

İşte benim kod:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

Buraya kolayca kopya yapıştırmak için stil kodunun satır içi olduğunu lütfen unutmayın.

Ben sadece kodun üstüne başka bir üst div ekleyebilir ve daha sonra bunun içinde bir href yapabilirsiniz bir yerde okuyun. Ancak, bazı araştırmalara dayanarak geçerli bir kod olmayacaktır.

Tekrar özetlemek için, tüm div ( #parentdivimage) bir href bağlantısı olması gerekir.

GÜNCELLEME 06/10/2014: a'nın içindeki div öğelerini kullanmak HTML5'te anlamsal olarak doğrudur.

Aşağıdaki senaryolar arasından seçim yapmanız gerekir:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

anlamsal olarak yanlış, ama işe yarayacak.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

bu anlamsal olarak doğrudur ancak JS kullanımını içerir.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

anlamsal olarak doğrudur ve beklendiği gibi çalışır, ancak artık div değildir.

Neden <div>elementi çıkartıp yerine onunla değiştirmiyorsun <a>? Çapa etiketi değildir diye bir div anlamına gelmez değil tarzı onu can display:blockyükseklik, genişlik, arka plan, sınır, vb Bunu yapabilir bakmak bir div gibi ama yine de hareket bir bağlantı gibi. Ardından, bazı kullanıcılar için etkinleştirilmemiş olabilecek geçersiz koda veya JavaScript'e güvenmiyorsunuz.

Şöyle yapın:

Parentdivimage genişlik ve yüksekliğe sahip olmalı ve konumu şöyle olmalıdır:

position: relative;

Üst öğe görüntüsünün hemen içine, üst öğenin içerdiği diğer div öğelerinin yanına şunları koymalısınız:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

Sonra css dosyasında:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

Span etiketi, yükseklik ve genişlik% 100'e ayarlandığından, parentdiv olan üst bloğunu dolduracaktır. Z-endeksinin diğer öğelere göre daha yüksek ayarlanması nedeniyle, yayılma tüm çevredeki öğelerin üstünde olacaktır. Sonunda span tıklanabilir, çünkü bir 'a' etiketinin içindedir.

Yapabileceğiniz iki şey:

1. Değişim #childdivimagebir karşı spaneleman ve değişim #parentdivimagebir çapa etiketine. Bu, şeylerin mükemmel görünmesi için biraz daha stil eklemenizi gerektirebilir. Anlamsal işaretleme kullandığından ve javascript'e bağlı olmadığından bu tercih edilir.

2. Bir tıklama etkinliğini bağlamak için Javascript kullanın #parentdivimage. window.locationBu etkinliğin içinde değişiklik yaparak tarayıcı penceresini yeniden yönlendirmelisiniz . Bu TheEasyWay ^TM , ancak incelikle bozulmayacak.

Gerçeküstü Düşlerin söylediklerinden yola çıkarak, muhtemelen çapa etiketini deneyimlerime göre şekillendirmek en iyisidir, ancak gerçekten ne yaptığınıza bağlıdır. İşte bir örnek:

Html:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

Sonra CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Make divait id="childdivimag"bir spanyerine ve bir o sarın aelemanı. As spanve imgvarsayılan olarak in-line unsurlarıdır bir halbuki bu, geçerli kalır divbir blok düzeyi unsurdur ve bu nedenle geçersiz mark-up bir içinde bulunan zaman a.

display:blocktutturucu eleman koymak . ve / veya zoom:1;

ama bunu gerçekten yapmalısınız.

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

Ne yapacağım <a>etiketin içine bir boşluk koymak , span engellemek için ayarlamak ve span boyut eklemek, ya da sadece <a>etiketi etikete uygulamak. <a>Etiket stilindeki konumlandırmayı kesinlikle ele alın . JavaScript'e bir onclick eventekleme a whereetkinliği yakalar, ardından hreftıklamanın varsayılan işlemlerini ve köpürmesini önlemek için JavaScript etkinliğinin sonunda false değerini döndürür . Bu, JavaScript'in etkinleştirildiği veya etkinleştirilmediği durumlarda çalışır ve herhangi bir AJAX, Javascript dinleyicisinde işlenebilir.

JQuery kullanıyorsanız, bunu dinleyiciniz olarak kullanabilir onclickve aetiketinde atlayabilirsiniz .

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

bu, dinleyicileri değiştirilen öğelere gerektiği gibi eklemenizi sağlar.

<div>Etiketleri olan bir bağlantı :

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

<a>Etiketleri olan bir bağlantı :

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>

Bu birçok şekilde yapılabilir. a. Bir etiketin içinde iç içe geçmiş kullanma.

<a href="link1.html">
   <div> Something in the div </div>
 </a>

b. Satır İçi JavaScript Yöntemini Kullanma

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

c. JQuery etiketi içinde kullanma

HTML:

<div class="demo" > Some text here </div>

jQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });