我正在尝试构建一个表格,其中每个单元格的内容都用设置为完整高度和宽度的 A
标记包裹,以便整个单元格都可以点击。
但有些单元格的内容需要有额外的链接。
马上跳出来的解决办法就是嵌套A
标签,像这样:
<td>
<a href="#" class="cell" >
Officers include:
President, Vice president, Secretary, Treasurer,
<a href="#">7 others</a>
</a>
</td>
但是嵌套的A
标签是非法的。是否有任何解决方法可以让我达到预期的效果?
最佳答案
您可以使用 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()
)。
关于html - 替代嵌套 anchor 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5214363/