JavaScript를 사용하지 않고 CSS에서 콘텐츠를 숨기고 표시하려면 어떻게 해야 합니까?

CSS로 콘텐츠 숨기기 및 표시, JavaScript 불필요

깨끗하고 효율적인 UI를 추구하려면 콘텐츠를 숨기고 표시하는 기능. 전통적으로 JavaScript는 이 작업을 위한 솔루션이었습니다. 그러나 CSS를 사용하는 것이 더 간단하고 성능이 더 뛰어난 대안을 제공합니다.

초기 시도

CSS를 사용하는 한 가지 가능한 접근 방식은 ':focus' 의사 클래스를 사용하는 것입니다. 제공된 원본 CSS 조각을 살펴보겠습니다.

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

문제 발생

이 접근 방식은 '숨기기' 링크를 클릭할 때 콘텐츠를 성공적으로 숨기는 반면 다음과 같은 기능도 허용합니다. 페이지의 아무 곳이나 클릭하면 콘텐츠가 숨겨집니다. 이 동작은 '숨기기' 링크의 의도된 기능을 저하시키므로 바람직하지 않습니다.

향상된 솔루션

이 문제를 해결하기 위해 약간 수정된 CSS 구조를 도입합니다. :

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

기능

이 개선된 솔루션에서는 ':focus' 의사 클래스가 '.span3' 및 '.span2'라는 두 요소에 적용됩니다. '는 각각 '숨기기' 및 '표시' 링크를 나타냅니다. 'Hide' 링크('.span3')에 포커스가 생기면 숨겨진 콘텐츠가 포함된 '.alert' 클래스로 요소를 숨깁니다. 반대로 '표시' 링크('.span2')에 포커스가 생기면 '.alert' 요소가 표시됩니다.

장점

이 접근 방식은 여러 가지 이점을 제공합니다. :

• JavaScript 필요 없음: CSS에만 의존하므로 구현 및 유지 관리가 더 쉽습니다.
• 대상 숨김: 콘텐츠는 '숨기기' 링크를 클릭할 때만 숨겨져 다른 페이지 상호 작용에서 의도치 않게 숨겨지는 것을 방지합니다.
• 최소 변경 사항: 의도한 동작을 유지하면서 원래 CSS를 약간만 수정하면 됩니다. .

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