CSS を使用したコンテンツの非表示と表示: JavaScript を使用しないトリック

Web 開発で作業する場合、多くの場合、コンテンツの可視性を制御することが不可欠です。従来、これは JavaScript を使用して実現されていましたが、CSS を使用してエレガントな非表示と表示の効果を作成することもできます。そのような手法の 1 つを以下に説明し、以前のアプローチで遭遇した特定の課題に対処します。

コンテンツの非表示/表示切り替え:

CSS を使用して、コンテンツの切り替えを作成できます。ユーザーはアイテムのリストを非表示にしたり表示したりできます。次のスニペットは、この機能を示しています。

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

課題:

上記の CSS は望ましい効果を実現しますが、欠点もあります。コンテンツが表示されている場合、ページ上の任意の場所をクリックするだけでコンテンツを非表示にできます。 「非表示」リンクをクリックした場合にのみコンテンツを非表示にしたいため、この動作は望ましくありません。

解決策:

この問題に対処するには、次の手順を実行します。修正された CSS および HTML コードを使用できます:

CSS:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

HTML:

Hide Me
Show Me
Some alarming information here

これらの変更により、アラート メッセージは「Hide Me」スパン要素がクリックされた場合にのみ非表示になります。このソリューションは問題を効果的に解決し、JavaScript に依存せずにコンテンツを非表示にしたり表示したりするための CSS ベースの方法を提供します。