html - attribute - Alternativa a las etiquetas de anclaje anidadas

title subtitle html

Question

Estoy tratando de construir una tabla donde el contenido de cada celda esté envuelto con una etiqueta A establecida en altura y anchura completas, de modo que se pueda hacer clic en toda la celda.

Pero algunas de las celdas necesitan tener enlaces adicionales en su contenido.

La solución que salta inmediatamente es anidar las etiquetas A , así:

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

Pero las etiquetas A anidadas son ilegales. ¿Hay alguna solución que me permita lograr el efecto deseado?

Answer 1

¿Por qué no definirlo así?

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

¿Seguramente si se puede hacer clic en la celda completa para anular cualquiera de los enlaces contenidos de la celda?

Answer 2

Podrías usar CSS o JavaScript. Yo recomendaría simplemente usar CSS.

CSS

Esto funciona en mi Firefox usando solo CSS. Básicamente, acabo de hacer que todos los enlaces secundarios (excepto el grande) tengan position: relative y establezca su z-index más alto que el enlace de fondo grande.

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

Adjunte un evento de clic a la celda y un evento a todos los enlaces secundarios. Asegúrese de que los eventos de vínculos secundarios no se stopPropagation() ).

Answer 3

Probablemente quieras algo como ...

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