2

我有一个快速的问题：

我有一个快速表，其中有一些可点击的东西。

<table class ="tablez">
    <tr>
        <th>Table Title </th>
    </tr>
    <tr>
        <td>
            <a class="clickable">Click Me!</a>
            <div id="showedClickable">
                <p>This is showed when Click Me! is clicked.</p> 
            </div><!--EO showedClickable -->
        </td>
    </tr>
</table>

我想要完成的是：

#showedClickable {
    position:absolute;
    display:none;
    width:auto;
    height:auto;
}

这是我不知道如何“表达”的部分......我该怎么做

a.clickable:focus + #showedClickable {
    display:block;
}
4

2 回答 2

7

问题是a没有 a 的元素href默认不会获得焦点。这就是您的代码不起作用的原因。你应该给它一个tabindex使其具有焦点。

<a tabindex="0" class="clickable">Click Me!</a>

jsFiddle 演示

于 2013-09-20T14:38:35.203 回答
2

如果您想显示标题所示的div点击a，您可以通过修改以下代码来实现：

HTML：

<a href='#showedClickable' class="clickable">Click Me!</a>

CSS：

#showedClickable:target {
    display:block;
}

小提琴

编辑：

:target是一个伪类，它匹配一个id与URI的片段标识符相同的元素。

带有片段标识符的 URI 链接到文档中的某个元素，称为目标元素。在这种情况下，目标（href锚点）是一个带有idas的元素showedClickable。因此，当单击锚点时，将显示内容。

您可以在此处找到有关:target伪类的更多详细信息

注意：正如 bažmegakapa 在评论中指出的那样，此方法在IE 8 及更低版本中不起作用。

于 2013-09-20T14:41:17.057 回答