Question

我正在尝试构建一个表格，其中每个单元格的内容都包含一个A标记设置为完整的高度和宽度，以便整个单元格可以点击。

但是有些细胞需要在其内容中添加其他链接。

立即跳出的解决方案是嵌套A标签，如下所示：

<td>
   <a href="#" class="cell" >
      Officers include:
      President, Vice president, Secretary, Treasurer,
      <a href="#">7 others</a>
   </a>
</td>

但嵌套的A标签是非法的。是否有任何解决方法可以让我达到预期的效果？

Answer 1

您可以使用CSS或JavaScript。我建议只使用CSS。

CSS

This works in my Firefox仅使用CSS。基本上我只是让所有子链接（大的除外）都有position: relative并将z-index设置为高于大背景链接。

HTML

<div>
    Hello, <a href="http://example.com/hello" class="normal">Bob</a>
    <a href="http://example.com" class="big"></a>
</div>

CSS

div {
    position: relative;
}

.big {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;   
  z-index: 0;
}

.normal {
  position: relative;
  z-index: 1;  
}

的JavaScript

将单击事件附加到单元格，并将事件附加到所有子链接。确保子链接事件不会冒泡（stopPropagation()）。

Answer 2

你可能想要像...这样的东西。

<td>
   <a href="#" class="cell" >
      Officers include:
      President, Vice president, Secretary, Treasurer,
   </a>
   <a href="#">7 others</a>
</td>

Answer 3

为什么不这样定义它：

<td>
    <a href="#" class="cell" >
       Officers include:
       President, Vice president, Secretary, Treasurer,
    </a>
    <a href="#">7 others</a>
</td>

当然，如果整个单元格都是可点击的，那么会否定任何单元格包含的链接？

替代嵌套锚标签

3 个答案:

CSS

HTML

CSS

的JavaScript