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

你做的很好，也很正确，效果很好。 The W3C even states：

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

如何使整个<section>元素的区域可单击？

3 个答案: