JavaScript 없이 CSS로 콘텐츠를 숨기고 표시하려면 어떻게 해야 합니까?

CSS로 콘텐츠 숨기기 및 표시: JavaScript를 사용하지 않는 트릭

웹 개발 작업을 할 때 콘텐츠 표시 여부를 제어하는 ​​것이 필수적인 경우가 많습니다. 전통적으로 이는 JavaScript를 사용하여 달성되었지만 CSS를 사용하여 우아한 숨기기 및 표시 효과를 만들 수도 있습니다. 이전 접근 방식에서 직면한 특정 문제를 해결하는 이러한 기술 중 하나가 아래에 설명되어 있습니다.

콘텐츠 숨기기/표시 토글:

CSS를 사용하여 다음과 같은 콘텐츠 토글을 만들 수 있습니다. 사용자가 항목 목록을 숨기거나 표시할 수 있습니다. 다음 스니펫은 이 기능을 보여줍니다.

<code class="css">#cont {
  display: none;
}
.show:focus + .hide {
  display: inline;
}
.show:focus + .hide + #cont {
  display: block;
}</code>

도전 과제:

위 CSS는 원하는 효과를 달성하지만 단점이 있습니다. 콘텐츠가 표시되면 페이지의 아무 곳이나 클릭하기만 하면 숨길 수 있습니다. "숨기기" 링크를 클릭할 때만 콘텐츠가 숨겨지기를 원하므로 이러한 동작은 바람직하지 않습니다.

해결책:

이 문제를 해결하려면 다음을 따르세요. 개정된 CSS 및 HTML 코드를 사용할 수 있습니다:

CSS:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML:

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

이러한 변경으로 인해 "Hide Me" 범위 요소를 클릭할 때만 경고 메시지가 숨겨집니다. 이 솔루션은 문제를 효과적으로 해결하고 JavaScript에 의존하지 않고 콘텐츠를 숨기고 표시하는 CSS 기반 방법을 제공합니다.

위 내용은 JavaScript 없이 CSS로 콘텐츠를 숨기고 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!