使TD可点击

Question

我已经摆好桌子了.

你看,我试图创建一个用户将悬停的表,然后单击td以显示id.检查小提琴你会明白的.

现在,当用户悬停Parent4时,您可能会注意到桌面上没有文本的空间,用户无法单击它,因此Child4不会出现....

现在,有没有什么方法可以让空间里没有可点击的文字,所以它显示了child4？

我试过了

<td ahref="#child4"> but didn't work...

////？编辑因为它有点令人困惑......

我需要你去看小提琴.您可以看到Parent4的单元格大于文本.因此,当用户在单元格上悬停时,我希望文本更改颜色,单元格也要更改颜色+如果用户单击单元格,Child4将不会出现,因为单元格不可点击,所以我的问题,如何制作单元格可点击以显示Child4？

UPD:

我没有更新小提琴,但它现在是最新的.

Answer 1

该href属性设计用于锚元素(<a/>).你应该放的"ahref" <a href="">.a是它自己的元素,而不是HTML属性,并且href是它接受的属性.

要制作td可点击的文本,您只需在其中放置一个锚:

<td>
    <a href="#child4">My clickable text</a>
</td>

编辑:要解决此问题,现在已添加问题,只需添加以下CSS:

td a {
    display:block;
    width:100%;
}

这样做是将锚标记显示为块,允许我们调整宽度,然后将宽度设置为100%,允许它填充剩余空间.

Answer 2

在td标记上添加onClick事件.

<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>

Answer 3

只用HTML就可以有一种非常简单的方法.将链接文本放在DIV中.DIV占据整个TD并使其全部可点击.

<a href="http://whatever.com">
  <div>
     Link Text
  </div>
</a>