Tạo một div thành một liên kết

Tôi có một <div>khối với một số nội dung trực quan lạ mắt mà tôi không muốn thay đổi. Tôi muốn làm cho nó một liên kết có thể nhấp.

Tôi đang tìm kiếm một cái gì đó như <a href="…"><div> … </div></a>, nhưng đó là XHTML 1.1 hợp lệ.

Đến đây với hy vọng tìm ra giải pháp tốt hơn cho tôi, nhưng tôi không thích bất kỳ giải pháp nào được cung cấp ở đây. Tôi nghĩ rằng một số bạn đã hiểu sai câu hỏi. OP muốn làm cho một div đầy đủ nội dung hoạt động như một liên kết. Một ví dụ về điều này sẽ là quảng cáo facebook - nếu bạn nhìn, chúng thực sự là đánh dấu thích hợp.

Đối với tôi, các no-nos là: javascript (không cần thiết chỉ cho một liên kết và SEO / khả năng truy cập rất tệ); HTML không hợp lệ.

Về bản chất nó là thế này:

• Xây dựng bảng điều khiển của bạn bằng cách sử dụng các kỹ thuật CSS bình thường và HTML hợp lệ.
• Ở đâu đó trong đó đặt một liên kết mà bạn muốn là liên kết mặc định nếu người dùng nhấp vào bảng điều khiển (bạn cũng có thể có các liên kết khác).
• Trong liên kết đó, đặt thẻ span trống ( <span></span>không phải <span />- cảm ơn @Campey)
• đưa ra vị trí bảng điều khiển: tương đối

• áp dụng CSS sau đây cho khoảng trống:

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

  Bây giờ nó sẽ bao phủ bảng điều khiển và vì nó nằm trong <A>thẻ, đó là một liên kết có thể nhấp

• đưa ra bất kỳ liên kết nào khác bên trong vị trí bảng: tương đối và chỉ số z phù hợp (> 1) để đưa chúng ra trước liên kết nhịp mặc định

Bạn không thể tự tạo divmột liên kết, nhưng bạn có thể làm cho một <a>thẻ hoạt động như một block, cùng một hành vi mà nó <div>có.

a {
    display: block;
}

Sau đó, bạn có thể đặt chiều rộng và chiều cao trên đó.

Đây là một câu hỏi cổ xưa, nhưng tôi nghĩ tôi sẽ trả lời vì mọi người ở đây có một số giải pháp điên rồ. Nó thực sự rất rất đơn giản ...

Thẻ neo hoạt động như thế này -

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

Ôi ...

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

Mặc dù tôi không chắc điều này có hợp lệ không. Nếu đó là lý do đằng sau các giải pháp nói, thì tôi xin lỗi ...

Yêu cầu một ít javascript. Nhưng, bạn divsẽ có thể nhấp được.

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

Tùy chọn này không yêu cầu blank.gif như trong câu trả lời được đánh giá cao nhất:

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

Như được đề xuất tại http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-USE-css/

Đây là một giải pháp "hợp lệ" để đạt được những gì bạn muốn.

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

Nhưng rất có thể những gì bạn thực sự muốn là có một <a>thẻ được hiển thị dưới dạng một yếu tố cấp khối.

Tôi không khuyên bạn nên sử dụng JavaScript để mô phỏng một siêu liên kết vì nó đánh bại mục đích xác thực đánh dấu, cuối cùng là để thúc đẩy khả năng truy cập (xuất bản các tài liệu được định dạng tốt theo các quy tắc ngữ nghĩa phù hợp sẽ giảm thiểu khả năng cùng một tài liệu sẽ được các trình duyệt khác nhau giải thích).

Tốt hơn là nên xuất bản một trang web không xác thực, nhưng hiển thị và hoạt động đúng trên tất cả các trình duyệt , bao gồm cả các trình duyệt bị tắt JavaScript. Hơn nữa, việc sử dụng onclickkhông cung cấp thông tin ngữ nghĩa cho trình đọc màn hình để xác định rằng div đang hoạt động như một liên kết.

Cách rõ ràng nhất là sử dụng jQuery với các thẻ dữ liệu được giới thiệu trong HTML. Với giải pháp này, bạn có thể tạo một liên kết trên mỗi thẻ bạn muốn. Trước tiên, xác định thẻ (ví dụ div) bằng thẻ liên kết dữ liệu:

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

Bây giờ bạn có thể tạo kiểu cho div theo cách bạn muốn. Và bạn cũng phải tạo kiểu cho hành vi giống như "liên kết":

[data-link] {
  cursor: pointer;
}

Và cuối cùng, đặt cuộc gọi jQuery này đến trang:

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

Với mã này, jQuery áp dụng một trình nghe nhấp chuột cho mọi thẻ trên trang có thuộc tính "liên kết dữ liệu" và chuyển hướng đến URL nằm trong thuộc tính liên kết dữ liệu.

Không chắc chắn nếu điều này là hợp lệ nhưng nó đã làm việc cho tôi.

Mật mã :

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

Để làm cho câu trả lời của người làm việc hoạt động trong IE 7 trở đi, nó cần một vài điều chỉnh.

1. IE sẽ không tôn trọng chỉ mục z nếu phần tử không có màu nền, vì vậy liên kết sẽ không chồng lấp các phần của div chứaig có nội dung, chỉ có các phần trống. Để khắc phục điều này, một nền được thêm vào với độ mờ 0.

2. Vì một số lý do, IE7 và các chế độ tương thích khác nhau hoàn toàn thất bại khi sử dụng khoảng cách trong cách tiếp cận liên kết. Tuy nhiên, nếu liên kết được đưa ra kiểu, nó hoạt động tốt.

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

bạn cũng có thể thử bằng cách bọc một neo, sau đó biến chiều cao và chiều rộng của nó giống với cha mẹ của nó. Điều này làm việc cho tôi hoàn hảo.

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

tại sao không? use <a href="bla"> <div></div> </a>hoạt động tốt trong HTML5

Bài đăng này là Cũ tôi biết nhưng tôi chỉ phải khắc phục vấn đề tương tự vì chỉ cần viết một thẻ liên kết bình thường với màn hình được đặt để chặn không làm cho toàn bộ div có thể nhấp vào trong IE. vì vậy, để khắc phục vấn đề này đơn giản hơn nhiều so với việc phải sử dụng JQuery.

Trước tiên, hãy cho chúng tôi hiểu lý do tại sao điều này xảy ra: IE sẽ không tạo một div trống có thể nhấp được, nó chỉ làm cho văn bản / hình ảnh trong thẻ div / a có thể nhấp được.

Giải pháp: Điền vào div với hình ảnh bánh và ẩn nó khỏi người xem.

Làm sao? Bạn hỏi những câu hỏi hay, bây giờ hãy lắng nghe. thêm kiểu backround này vào thẻ

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

Và ở đó bạn có nó toàn bộ div bây giờ có thể nhấp. Đây là cách tốt nhất đối với tôi vì tôi sử dụng nó cho Thư viện ảnh của mình để cho phép người dùng vuốt vào một nửa hình ảnh để di chuyển sang trái / phải và sau đó đặt một hình ảnh nhỏ cũng chỉ để tạo hiệu ứng hình ảnh. Vì vậy, đối với tôi, tôi đã sử dụng hình ảnh trái và phải làm hình nền!

Chỉ cần có liên kết trong khối và tăng cường nó với jquery. Nó xuống cấp 100% duyên dáng cho bất cứ ai không có javascript. Làm điều này với html không thực sự là giải pháp tốt nhất. Ví dụ:

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

Sau đó sử dụng jquery để làm cho khối có thể nhấp (qua tường của nhà thiết kế web ):

$(document).ready(function(){

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

});

Sau đó, tất cả những gì bạn phải làm là thêm kiểu con trỏ vào div

    #div_link:hover {cursor: pointer;}

Đối với điểm thưởng, chỉ áp dụng các kiểu này nếu javascript được bật bằng cách thêm lớp 'js_enables' vào div hoặc phần thân hoặc bất cứ thứ gì.

Ví dụ này làm việc cho tôi:

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

Điều này làm việc cho tôi:

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

Điều này thêm một yếu tố vô hình (span), bao trùm toàn bộ div của bạn và cao hơn toàn bộ div của bạn trên chỉ mục z, vì vậy khi ai đó nhấp vào div đó, nhấp chuột về cơ bản bị chặn bởi lớp "span" vô hình của bạn được liên kết.

Lưu ý: Nếu bạn đã sử dụng chỉ mục z cho các yếu tố khác, chỉ cần đảm bảo giá trị của chỉ số z này cao hơn bất kỳ thứ gì bạn muốn nó nằm trên "trên cùng".

Thực tế bạn cần bao gồm mã JavaScript tại thời điểm này, hãy kiểm tra hướng dẫn này để làm như vậy.

nhưng có một cách khó khăn để đạt được điều này bằng cách sử dụng mã CSS, bạn phải lồng một thẻ neo bên trong thẻ div của mình và bạn phải áp dụng thuộc tính này cho nó,

display:block;

Khi bạn đã thực hiện điều đó, nó sẽ làm cho toàn bộ diện tích chiều rộng có thể nhấp (nhưng trong chiều cao của thẻ neo), nếu bạn muốn bao phủ toàn bộ vùng div, bạn phải đặt chính xác chiều cao của thẻ neo theo chiều cao của thẻ div, ví dụ:

height:60px;

điều này sẽ làm cho toàn bộ khu vực có thể nhấp được, sau đó bạn có thể áp dụng text-indent:-9999pxcho thẻ neo để đạt được mục tiêu.

Điều này thực sự khó khăn và đơn giản và nó chỉ được tạo bằng mã CSS.

đây là một ví dụ : http://jsfiddle.net/hbirjand/RG8wW/

Đây là cách tốt nhất để làm điều đó như được sử dụng trên trang web BBC và Người bảo vệ:

Tôi tìm thấy kỹ thuật ở đây: http://codepen.io/IschaGast/pen/Qjxpxo

đây là 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>

đây là 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>

Công việc này đối với tôi:

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

Bạn có thể cung cấp một liên kết đến div của bạn bằng phương pháp sau:

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

Bạn có thể tạo bao quanh phần tử bằng thẻ a href hoặc bạn có thể sử dụng jquery và sử dụng

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

Đây là cách đơn giản nhất.

Nói, đây là divkhối tôi muốn làm cho có thể nhấp:

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

Vì vậy, đặt một hrefnhư sau:

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

Chỉ cần xem xét divkhối như một phần tử html bình thường và kích hoạt hrefthẻ thông thường .
Nó hoạt động trên FF ít nhất.

Mặc dù tôi không khuyên bạn nên làm điều này trong bất kỳ trường hợp nào, đây là một số mã khiến DIV thành một liên kết (lưu ý: ví dụ này sử dụng jQuery và một số đánh dấu nhất định được loại bỏ để đơn giản):

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

Một tùy chọn chưa được đề cập là sử dụng flex. Bằng cách áp dụng flex: 1cho athẻ, nó mở rộng để phù hợp với container.

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

a {
  flex: 1;
}

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

Tôi đã chọn một biến vì một số giá trị trong liên kết của tôi sẽ thay đổi tùy thuộc vào bản ghi mà người dùng đến từ đâu. Điều này làm việc để thử nghiệm:

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

và điều này cũng hoạt động:

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

Quần thông minh của tôi trả lời:

"Câu trả lời dễ hiểu cho:" Cách biến phần tử mức khối thành siêu liên kết và xác thực trong XHTML 1.1 "

Chỉ cần sử dụng HTML5 DOCTYPE DTD. "

Không thực sự đúng với eg7

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

Hoạt động IE7-9, Chrome, Safari, Firefox,

nếu mọi thứ có thể đơn giản thế này ...

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

chỉ cần suy nghĩ một chút bên ngoài hộp ;-)