ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS のみを使用して要素をオンデマンドで表示および非表示にするにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-11-17 02:00:03
オリジナル
935 人が閲覧しました

How Can I Display and Hide Elements on Demand Using Only 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート