替代嵌套锚标记 [英] Alternative to nested anchor tags

问题描述

我试图建立一个表格，其中每个单元格的内容都包含一个 A 标记设置为完全的高度和宽度，以便整个单元格是可点击的。 / p>

但有些单元格的内容中需要有其他链接。

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

 < td& 
< a href =＃class =cell> 
官员包括：
总裁，副总裁，秘书，财务主任，
< a href =＃> 7人< / a> 
< / a> 
< / td> 
  

但是嵌套的 A 标记是非法的。是否有任何解决方法，将允许我实现所需的效果？

解决方案

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

CSS

这在我的Firefox 只使用CSS。基本上我只是使所有的子链接（除了大的）有 position：relative 并设置它们的 z-index 高于大背景链接。

HTML

 < div> ; 
 Hello，< a href =http://example.com/helloclass =normal> Bob< / a> 
< a href =http://example.comclass =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（））。

I'm trying to build a table where each cell's content is wrapped with an A tag set to full height and width, so that the entire cell is clickable.

But some of the cells need to have additional links in their content.

The solution that immediately jumps out is to nest the A tags, like so:

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

But nested A tags are illegal. Is there any workaround that would allow me to achieve the desired effect?

解决方案

You could use CSS or JavaScript. I would recommend just using CSS.

CSS

This works in my Firefox using CSS only. Basically I just made all child links (except the big one) have position: relative and set their z-index to higher than the large background link.

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

Attach a click event to the cell, and an event to all child links. Make sure child links events do not bubble up (stopPropagation()).

这篇关于替代嵌套锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！