在可点击框内制作可点击链接（<a href> 内的 ActionLink）

Question

我正在尝试使整个表格行可点击，并已使用 javascript 做到了这一点。但是，这不会让您在状态栏中看到目标链接，还会阻止您在新选项卡中打开这些链接。

因此，我一直在尝试以下方法：

<tr>
  <td><a href="#">@Html.ActionLink(...)</a></td>
  <td><a href="#">@Html.ActionLink(...)</a></td>
  <td><a href="#">@Html.ActionLink(...)</a></td>
</tr>

然后使用 display:block;在锚点上以使整行可点击。

tr:hover { 
   background: red; 
}

td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

但是，我无法再单击操作链接，无论我在哪里单击表格行，它都会将我带到锚点中的任何内容。

这引出了我的问题。我怎样才能做到这一点，如果我单击行中的任意位置，它会将我带到我的锚点，但如果我精确单击操作链接，它会将我带到设置的位置。

非常感谢任何帮助。

Answer 1

有人为 Bootstrap 3 编写了一个插件，可以很容易地做到这一点。 Jasny Bootstrap 具有“行链接”，可让您执行以下操作：

<tbody data-link="row" class="rowlink">
<tr>
    <td><a href="#wholerow">First Link</a></td>
    <td>Some text</td><td class="rowlink-skip"><a href="#">Action</a></td>
</tr>
</tbody>

整行将链接到#wholerow，<a> 标记将链接到#