CSS のみを使用して要素をオンデマンドで表示および非表示にするにはどうすればよいですか?

CSS を使用してオンデマンドで要素を表示および非表示にする

ブラウザの設定やデバイスの制限に関係なく、Web コンテンツのナビゲーションは簡単に行える必要があります。 JavaScript が使用できない場合は、アクセシビリティを確保することが重要です。

メニューと複数の非表示 div があるシナリオを考えてみましょう。ユーザーの選択により、特定の div が表示されるようになります。 JavaScript は理想的な解決策を提供しますが、無効にすると機能しなくなります。

CSS による救助

この課題を克服するために、CSS が役に立ちます。 「チェックボックス ハック」は、チェックボックスと多用途の :checked 疑似セレクターの力を利用します。

仕組み

最初に、チェックボックスと複数の div が作成されます。チェックボックスには 3 つのスタイルが割り当てられています:

1. 非表示: チェックボックスは表示なしで視覚的に非表示になります。
2. 選択されていません:関連する div は表示されたまま非表示のままになります。 none.
3. Selected: チェックされたチェックボックスに関連付けられた div が、display: inline-block で表示されます。

Implementation

HTML で、チェックボックス要素と、各ラベルが一意に関連付けられた対応するラベル要素を作成します。 div.

<input type="checkbox">

CSS で、チェックボックスとラベルのスタイルを定義します。

/* Hide checkbox visually */
input[type="checkbox"] {
  display: none;
}

/* Use label for checkbox to provide visual accessibility */
label {
  display: inline-block;
  cursor: pointer;
}

/* Hide divs initially */
div {
  display: none;
}

/* Show div when associated checkbox is checked */
input[type="checkbox"]:checked ~ div {
  display: inline-block;
}

結論

この CSS では、-ベースのソリューションでは、JavaScript が無効になっている場合でも、クリックすると div をシームレスに表示または非表示にすることができ、ユーザーが誰でもアクセスできるようにします。体験してください。

以上がCSS のみを使用して要素をオンデマンドで表示および非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。