CSS만 사용하여 요청 시 요소를 표시하고 숨기려면 어떻게 해야 합니까?

CSS를 사용하여 요청 시 요소 표시 및 숨기기

웹 콘텐츠 탐색은 브라우저 설정이나 기기 제한에 관계없이 손쉬운 경험이 되어야 합니다. JavaScript를 사용할 수 없는 경우 접근성을 보장하는 것이 중요합니다.

메뉴와 여러 개의 숨겨진 div가 있는 시나리오를 생각해 보세요. 사용자의 선택은 특정 div의 표시를 트리거해야 합니다. JavaScript는 이상적인 솔루션을 제공하지만 비활성화되면 작동을 멈춥니다.

CSS를 구출하세요

이 문제를 극복하기 위해 CSS가 도움을 드립니다. "체크박스 해킹"은 체크박스의 강력한 기능과 다용도의 :checked 의사 선택기를 활용합니다.

작동 방식

처음에는 체크박스와 여러 div가 생성됩니다. 확인란에는 세 가지 스타일이 할당됩니다.

1. 숨김: 확인란이 표시로 시각적으로 숨겨집니다: 없음.
2. 선택되지 않음: 관련 div는 디스플레이와 함께 숨겨진 상태로 유지됩니다. 없음.
3. 선택됨: 선택된 확인란과 관련된 div가 디스플레이: inline-block으로 표시됩니다.

구현

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!