CSS のみを使用して、クリック時に複数の div の表示を切り替えるにはどうすればよいですか?

CSS を使用したクリック時の Div 表示の制御

問題:

ユーザーが複数の div の表示をオンに切り替えたいと考えています。 CSS のみを使用してクリックし、CSS なしでアクセシビリティを可能にします。 JavaScript.

解決策:

「チェックボックス ハック」を使用します:

1. 非表示のチェックボックスを作成します: 定義
2. クリック イベントをチェック ボックスに関連付けます。 メニュー オプションをクリックすると、チェック ボックスのチェック済み属性が切り替わります。
3. チェックボックスの状態に基づいて div をスタイルする: CSS で :checked 擬似セレクターを使用して、さまざまなスタイルを適用しますチェックボックスがチェックされているかどうかに応じて divs に変換されます。これは、表示、フェード、またはスライドの動作に影響します。

コード例:

<input type="checkbox">

#myCheckbox:checked ~ #myDiv {
  display: block;
  animation: slide-in 0.5s ease-in-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

利点:

• アクセシビリティ: JavaScript を有効にしなくても動作します。
• コントロール: を調整します。スライド/フェードの動作をカスタマイズするための CSS アニメーション。
• シンプルさ: 最小限の CSS コードが必要で、JavaScript は必要ありません。

以上がCSS のみを使用して、クリック時に複数の div の表示を切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。