html - 如何使列表项可点击？

Question

我一直在尝试不同的方式来显示数据，并一直在研究从表格中取出实际数据并将其显示在无序列表中。这让我可以更灵活地处理标记。

但是，我正在考虑一件事 - 如何使该行(在本例中为 UL)可点击？

我不想使用任何 JavaScript，所以我的第一个想法是这样的:

<div class="liTable">
<ul class="headerRow">
    <li class="cell col-1">title1</li>
    <li class="cell col-2">title2</li>
    <li class="cell col-3">title3</li>
    <li class="cell col-3">title4</li>
</ul>
<a href=”myURL”>
    <ul class="row">
        <li class="cell col-1">1</li>
        <li class="cell col-2">2</li>
        <li class="cell col-3">3</li>
        <li class="cell col-3">4</li>
    </ul>
</a></div>

但是这个标记是非法的，因为你不能放置 ul 的内部链接。

关于最佳实践的任何想法或建议？

Answer 1

请将表格数据放入表格，将列表数据放入列表，毕竟这就是它们的用途。

您可以通过添加使任何元素调用 URL

 onclick="location.href='http://www.example.com';"

添加到标签中，但请注意没有右键单击选项，您需要设置元素的样式以使其明显是一个链接。

您可以在这里进行测试:http://jsfiddle.net/WguUR/

---

但是像这样把表字段的内容用一个“a”括起来还不够吗？

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td><a href="http://www.example.com">January</a></td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>