如何做一個整體 <section> 元素的區域可點擊？

Question

我正在使用一個代碼庫，其中有一個由鏈接包裝的section元素內部呈現的文章列表，如下所示：

<a href="link/to/article">
    <section>
        <h2>Article title</h2>
        <img src="path/to/article/img">
        <p>Short description</p>
    </section>
</a>

section標簽內的內容是標題，圖像和簡短描述。 所有文章預覽都以類似於表格/網格的布局呈現。 單擊某個部分時，文章的全部內容將在新頁面中呈現。

原因是整個區域應該是可點擊的。 由於這個標記對我來說似乎不太語義，我想知道這個代碼是否正確，如果不是，是否有更好的方法使整個部分可點擊？

Answer 1

你做的很好，也很正確，效果很好。 W3C甚至指出 ：

只要在其中沒有交互式內容（例如按鈕或其他鏈接），a元素可以圍繞整個段落，列表，表格等， 甚至整個部分 。

它們包括一個類似於你的例子。

Answer 2

您可以使用JQuery來實現這一點......不需要使用鏈接標記

 <section id="clickable_section"> <h2>article title</h2> <img src="article/img"> <p>Short description</p> </section> <script> $(document).ready(function() { $("#clickable_section").click(function() { //Do something.... //Continue doing something,like redirecting the user to the new page }); }); </script> 

Answer 3

擁有像這樣的錨點工作非常困難。 做這樣的事情可能會更好：

HTML：

<section data-link="https://www.google.com">
  <h2>article title</h2>
  <img src="path/to/article/img">
  <p>Short description</p>
</section>

CSS：

section {
  cursor: pointer;
}

javascript（jQuery）：

$('section').on('click', function(e){
  e.preventDefault();
  window.location.href=$(this).data('link');
})