JavaScript を使用せずに CSS を使用してコンテンツを非表示にしたり表示したりするにはどうすればよいですか?

CSS を使用したコンテンツの非表示と表示: JavaScript を使用しないトリック

Web 開発で作業する場合、多くの場合、コンテンツの可視性の制御が不可欠です。従来、これは JavaScript を使用して実現されていましたが、CSS を使用してエレガントな非表示と表示の効果を作成することもできます。そのような手法の 1 つを以下に説明し、以前のアプローチで遭遇した特定の課題に対処します。

コンテンツの非表示/表示切り替え:

CSS を使用して、コンテンツの切り替えを作成できます。ユーザーはアイテムのリストを非表示にしたり表示したりできます。次のスニペットは、この機能を示しています。

<code class="css">#cont {
  display: none;
}
.show:focus + .hide {
  display: inline;
}
.show:focus + .hide + #cont {
  display: block;
}</code>

課題:

上記の CSS は望ましい効果を実現しますが、欠点もあります。コンテンツが表示されている場合、ページ上の任意の場所をクリックするだけでコンテンツを非表示にできます。 「非表示」リンクをクリックした場合にのみコンテンツを非表示にしたいため、この動作は望ましくありません。

解決策:

この問題に対処するには、次の手順を実行します。改訂された CSS および HTML コードを使用できます:

CSS:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML:

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

これらの変更により、警告メッセージは「Hide Me」スパン要素がクリックされた場合にのみ非表示になります。このソリューションは問題を効果的に解決し、JavaScript に依存せずにコンテンツを非表示にしたり表示したりするための CSS ベースの方法を提供します。

以上がJavaScript を使用せずに CSS を使用してコンテンツを非表示にしたり表示したりするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。