Альтернатива вложенным якорным тегам

Я пытаюсь создать таблицу, в которой содержимое каждой ячейки будет обернуто тегом A, установленным на полную высоту и ширину, так что вся ячейка будет нажата.

Но некоторые из ячеек должны иметь дополнительные ссылки в своем контенте.

Решение, которое сразу же выпрыгивает, заключается в том, чтобы вложить теги A, например:

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

Но вложенные теги A являются незаконными. Есть ли какое-либо обходное решение, которое позволило бы мне достичь желаемого эффекта?

Ответ 1

Вы можете использовать CSS или JavaScript. Я бы рекомендовал использовать CSS.

CSS

Это работает в моем 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()).

Ответ 2

Вероятно, вы хотите что-то вроде...

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

Ответ 3

Почему бы просто не определить его так:

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

Конечно, если вся ячейка кликабельна, что приведет к отрицанию любой из содержащихся в ячейке ссылок?