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要素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;
}

フィドル

編集：

:targetidURIのフラグメント識別子と同じ要素にマッチする疑似クラスです。

フラグメント識別子を持つ URI は、ドキュメント内の特定の要素 (ターゲット要素と呼ばれる) にリンクします。この場合、(アンカーの) ターゲットはas をhref持つ要素です。したがって、アンカーをクリックすると、コンテンツが表示されます。idshowedClickable

:target疑似クラスの詳細については、こちらをご覧ください

注: bažmegakapa がコメントで指摘したように、この方法はIE 8以前では機能しません。

于 2013-09-20T14:41:17.057 に答える