html – 替代嵌套的锚标签

前端之家收集整理的这篇文章主要介绍了html – 替代嵌套的锚标签前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试构建一个表,其中每个单元格的内容都被设置为全高度和宽度的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.基本上我刚刚做了所有的子链接(除了大的)有位置: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相关文章