在可点击框内设置可点击 link（ActionLink 在 <a href> 内）

Question

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

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

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

但是，我无法再单击操作 link，无论我单击 table 行，它都会带我到锚点中的任何内容。

这引出了我的问题。我怎样才能做到这一点，如果我点击行中的任何地方，它会把我带到我的锚点，但如果我精确地点击动作 link，它会把我带到设置的地方。

非常感谢任何帮助。

Answer 1

有人为 Bootstrap 3 编写了一个插件，可以轻松做到这一点。 Jasny Bootstrap 有 "Row Links" 允许您执行以下操作：

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

整行 link 到 #wholerow 而 <a> 标签将 link 到 #

在可点击框内设置可点击 link（ActionLink 在 <a href> 内）

Make clickable link inside clickable box (ActionLink inside <a href>)

html

javascript

css

asp.net-mvc

actionlink