使TD可点击 [英] Making a TD clickable

问题描述

我已经用表格设置了小提琴。

你看，我想创建一个表，用户将悬停，并单击td显示一个表。

现在，当用户将鼠标悬停在Parent4上时，您可能会注意到桌面上有没有文本的空间，用户可以' t点击它，所以Child4不会出现...

现在，有没有什么办法，我可以使没有文本可点击的空间，所以它显示child4？ / p>

我尝试了

 < td ahref =＃child4> ;但没有工作... 
  

////？EDIT由于有点混乱。

我需要你看看小提琴。
你可以看到Parent4的单元格比文本大。因此，当用户悬停在单元格上时，我想要文本更改颜色和单元格更改颜色太+如果用户单击单元格Child4将不会显示，因为单元格不可点击，所以我的问题，如何使单元格可以点击显示Child4？

我希望我更清楚哈哈哈

///更多编辑

我没有更新小提琴，但现在是最新的：D

谢谢您的时间！ / p>

解决方案

href 属性设计用于锚元素（< a /> ） 。 ahrefas you have put should be < a href => 。 a 是它自己的元素，而不是HTML属性， href 是它接受的属性。

要使 td 可点击的文本，您只需在其中加入锚点：

 < td> 
< a href =＃child4>我的可点击文字< / a> 
< / td> 
  

修改：现在问题已添加，添加以下CSS：

  td a {
 display：block; 
 width：100％; 
} 
  

这样做是将锚标签显示为块，宽度，然后将宽度设置为100％，允许它填充剩余的空间。

工作JSFiddle 。

I've set up a fiddle with a table.

You see, Im trying to make a table where the user will hover and click the td to show an id. Check the fiddle out and you'll understand.

Now, When the user hovers Parent4, you may notice there's space on the table where there's no text and the user can't click it so the Child4 wont appear....

Now, is there any way I can make the space where there's no text clickable so it shows up child4?

I tried

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

////?EDIT As its a bit confusing...

I need you to see the fiddle. You can see the cell for Parent4 is bigger than the text. So when the user hovers on the cell I want the text to change color and the cell to change color too + if the user clicks the cell Child4 won't appear because a cell is unclickable, so My question, how can I make the cell clickable to display Child4?

I hope I made myself clearer hahaha

///More Edit

I didn't update the fiddle, but it's now up to date :D

Thank you for your time!

解决方案

The href property is designed for anchor elements (<a/>). "ahref" as you've put should be <a href="">. a is an element of its own, not a HTML attribute, and href is an attribute it accepts.

To make the text of a td clickable you can simply put an anchor within it:

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

Edit: To fix this now that the question has been added, simply add in the following CSS:

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

What this does is display the anchor tag as a block, allowing us to adjust the width, and then set the width to 100%, allowing it to fill the remaining space.

Working JSFiddle.

这篇关于使TD可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！