a href liên kết cho toàn bộ div trong HTML / CSS

Đây là những gì tôi đang cố gắng thực hiện trong HTML / CSS:

Tôi có hình ảnh ở các độ cao và chiều rộng khác nhau, nhưng tất cả chúng đều dưới 180x235. Vì vậy, những gì tôi muốn làm là tạo ra một divvới bordervà vertical-align: middletất cả chúng. Tôi đã thực hiện thành công điều đó nhưng bây giờ tôi đang bế tắc về cách a href liên kết toàn bộ div.

Đây là mã của tôi:

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

Xin lưu ý rằng vì mục đích sao chép dễ dàng ở đây, mã kiểu là nội tuyến.

Tôi đã đọc ở đâu đó rằng tôi có thể chỉ cần thêm một div cha khác trên đầu mã và sau đó thực hiện a href bên trong đó. Tuy nhiên, dựa trên một số nghiên cứu, nó sẽ không phải là mã hợp lệ.

Vì vậy, để tổng hợp lại, tôi cần toàn bộ div ( #parentdivimage) là liên kết href.

CẬP NHẬT 06/10/2014: sử dụng div bên trong a là đúng về mặt ngữ nghĩa trong HTML5.

Bạn sẽ cần phải chọn giữa các tình huống sau:

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

không đúng về mặt ngữ nghĩa, nhưng nó sẽ hoạt động.

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

điều này đúng về mặt ngữ nghĩa nhưng nó liên quan đến việc sử dụng JS.

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

đúng về mặt ngữ nghĩa và hoạt động như mong đợi nhưng không còn là div nữa.

Tại sao bạn không loại bỏ <div>phần tử và thay thế nó bằng một <a>thay thế? Chỉ vì thẻ neo không phải là div không có nghĩa là bạn không thể tạo kiểu cho nó display:block, chiều cao, chiều rộng, nền, đường viền, v.v. Bạn có thể làm cho nó trông giống như một div nhưng vẫn hoạt động như một liên kết. Sau đó, bạn không dựa vào mã hoặc JavaScript không hợp lệ có thể không được bật cho một số người dùng.

Làm như thế này:

Parentdivimage nên có chiều rộng và chiều cao được chỉ định, và vị trí của nó phải là:

position: relative;

Ngay bên trong cha mẹ, bên cạnh các div khác mà cha mẹ chứa bạn nên đặt:

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

Sau đó trong tệp css:

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

Thẻ span sẽ điền vào khối cha mẹ của nó là Parentdiv, vì chiều cao và chiều rộng được đặt thành 100%. Span sẽ nằm trên cùng của tất cả các yếu tố xung quanh vì đặt chỉ số z cao hơn các yếu tố khác. Cuối cùng, nhịp sẽ có thể nhấp được, vì nó nằm trong thẻ 'a'.

Hai điều bạn có thể làm:

1. Thay đổi #childdivimagethành một spanyếu tố và thay đổi #parentdivimagethành thẻ neo. Điều này có thể yêu cầu bạn thêm một số kiểu dáng để làm cho mọi thứ trông thật hoàn hảo. Điều này được ưu tiên, vì nó sử dụng đánh dấu ngữ nghĩa và không dựa vào javascript.

2. Sử dụng Javascript để liên kết một sự kiện nhấp chuột vào #parentdivimage. Bạn phải chuyển hướng cửa sổ trình duyệt bằng cách sửa đổi window.locationbên trong sự kiện này. Đây là The EASWay ^TM , nhưng sẽ không xuống cấp một cách duyên dáng.

Bỏ qua những gì Giấc mơ siêu thực nói, có lẽ tốt nhất là tạo kiểu thẻ neo theo kinh nghiệm của tôi, nhưng nó thực sự phụ thuộc vào những gì bạn đang làm. Đây là một ví dụ:

Html:

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

Sau đó, 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

Tận dụng tối divcủa id="childdivimag"một spanthay vào đó, và quấn rằng trong một aphần tử. Khi spanvà imglà những yếu tố trong-line theo mặc định này vẫn có giá trị, trong khi đó một divlà một yếu tố khối cấp, và đánh dấu lên do đó không hợp lệ khi chứa trong một a.

đưa display:blockvào phần tử neo. và / hoặc zoom:1;

nhưng bạn chỉ nên thực sự làm điều này.

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>

Những gì tôi sẽ làm là đặt một khoảng bên trong <a>thẻ, đặt khoảng đó thành chặn và thêm kích thước cho khoảng đó hoặc chỉ áp dụng kiểu dáng cho <a>thẻ. Chắc chắn xử lý định vị trong<a> theo kiểu thẻ. Thêm một onclick eventvào a whereJavaScript sẽ bắt sự kiện, sau đó trả về false vào cuối sự kiện JavaScript để ngăn hành động mặc định củahref bong bóng và nhấp chuột. Điều này hoạt động trong các trường hợp có hoặc không bật JavaScript và bất kỳ AJAX nào cũng có thể được xử lý trong trình nghe Javascript.

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng trình này làm trình nghe của mình và bỏ qua phần onclicktronga thẻ thẻ.

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

điều này cho phép bạn gắn người nghe với bất kỳ yếu tố thay đổi nào khi cần thiết.

Một liên kết với <div>các thẻ:

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

Một liên kết với <a>các thẻ:

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

Điều này có thể được thực hiện bằng nhiều cách. a. Sử dụng lồng trong thẻ.

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

b. Sử dụng phương pháp JavaScript nội tuyến

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

c. Sử dụng jQuery bên trong thẻ

HTML:

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

jQuery:

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