CSSのみでDivの表示と非表示を切り替えることはできますか?

CSS のみで Div を表示および非表示にする

CSS のみを使用して、ユーザー入力に基づいて div を表示または非表示にしたいですか? JavaScript に依存せずにこれを実現する方法を見てみましょう。

問題ステートメント:

ユーザーは、CSS のみを使用して、クリック時に div を表示および非表示にしたいと考えています。現在は jQuery が使用されていますが、JavaScript が無効になっていても機能するアクセシビリティ対応のソリューションが好まれています。

CSS のみのソリューション: チェックボックス ハック

純粋な CSS ソリューションの場合は、チェックボックスのハックを考えてみましょう。この方法では、チェックボックスを使用して div の表示を制御します。チェックボックスをオンにすると、1 つのスタイル セットが適用され、チェックボックスをオフにすると、別のセットが使用されます。 :checked 擬似セレクターは、これらの状態を区別するために使用されます。

見た目を美しくするためにチェックボックスを非表示にするには、チェックボックスをラベルに添付します。

デモとリソース

• [ダブレット]デモ](http://dabblet.com/gist/1506530)
• [チェックボックス ハックに関する CSS トリックの記事](http://css-tricks.com/the-checkbox-hack/)

以上がCSSのみでDivの表示と非表示を切り替えることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。