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

CSS によるコンテンツの非表示と表示、JavaScript は不要

クリーンで効率的な UI を追求するには、コンテンツを非表示にしたり表示したりする機能。従来、このタスクには JavaScript が頼りになるソリューションでした。ただし、CSS を使用すると、よりシンプルでパフォーマンスの高い代替手段が提供されます。

初期試行

CSS を使用する 1 つの可能なアプローチは、「:focus」疑似クラスを使用することです。提供されている元の CSS スニペットを調べてみましょう:

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

問題が発生しました

このアプローチでは、[非表示] リンクがクリックされたときにコンテンツが正常に非表示になりますが、次のこともできます。ページ上の任意の場所をクリックしてコンテンツを非表示にします。この動作は、「非表示」リンクの意図した機能を低下させるため、望ましくないです。

改善された解決策

この問題に対処するために、わずかに変更された CSS 構造を導入します。 :

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

機能

この改良されたソリューションでは、「:focus」疑似クラスが 2 つの要素「.span3」と「.span2」に適用されます。 '、それぞれ「非表示」リンクと「表示」リンクを表します。 「非表示」リンク (「.span3」) がフォーカスを取得すると、非表示のコンテンツを含むクラス「.alert」を持つ要素が非表示になります。逆に、「表示」リンク (「.span2」) がフォーカスを取得すると、「.alert」要素が表示されます。

利点

このアプローチにはいくつかの利点があります。 :

• JavaScript は必要ありません: CSS のみに依存しているため、実装と保守が簡単です。
• ターゲットを絞った非表示:コンテンツは「非表示」リンクをクリックした場合にのみ非表示になり、他のページ操作による意図しない非表示を防ぎます。
• 最小限の変更: 元の CSS にわずかな変更を加えるだけで、意図した動作が維持されます。 .

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