1

私の目的は、 （Show Meテキスト付き）がクリックされたときにクラスp付きのタグが表示されるようにすることです。疑似セレクターを使用してこれを実行しようとしましたが、この方法を使用すると、タグが再び非表示になる別の場所をクリックするまでタグが表示されます。showspan:focuspp

クリックした後でもセレクターを表示する方法はありますか:focus(または、Show Me がクリックされたときに別の/より良い方法 (JS を使用せずに) を表示し、p外側をクリックした後でもそのままにする方法はありますか?

フィドルのデモ

HTML コード

<span class="span1" tabindex="0">Show Me</span>
<p class="show" >This will show on click</p>

CSSコード

body {
  display: block;
}
.show {
  display: none;
}
.span1:focus ~ .show {
  display: block;
}
4

1 に答える 1

1

命名が示すように、:focus疑似クラスは機能しません。フォーカスが要素にある場合にのみ適用され、他の場所をクリックした後でもフォーカスを「固定」する方法がないためです。

これを実現する別の方法は、:target [1]疑似クラス/セレクターを使用することです。これは、p「ターゲット」と見なされるため、リンクがクリックされるたびに表示されます。

body {
  display: block;
}
.show {
  display: none;
}
#content:target {
  display: block;
}
<a class="span1" href='#content'>Show Me</a>

<p class="show" id='content'>This will show on click</p>

[1] -:targetセレクターは IE <= 8 ではサポートされていません。

于 2013-10-13T10:56:29.240 に答える