자바스크립트 없이 클릭!

이 게시물은 JavaScript가 없는 요소를 클릭하는 것에 관한 것입니다.

소개

숨겨진 콘텐츠를 표시하는 것과 같은 간단한 작업을 클릭하고 수행하려는 버튼이 있다고 가정해 보겠습니다.
당신은 직접 생각할 것입니다 :

const btn = document.getElementById("btn")
btn.addEventListener("click", () => {
    // display my hidden content...
})

CSS로 할 수 있다고 말하면 어떨까요?!

:target CSS 의사 클래스

인터넷을 서핑하는 동안 위의 Intro 제목처럼 페이지의 특정 섹션으로 리디렉션되는 링크인 hash-link를 클릭했을 것입니다!
다른 페이지로 리디렉션할 수도 있지만 항상 페이지의 특정 페이지target로 리디렉션됩니다.
이 경우 target는 해시#가 있는 링크를 통해 도달합니다.

<a href="#intro">Intro</a>

이것이 우리가 그것을 hash-link라고 부르는 이유입니다.

CSS에는 :target 의사 클래스가 있으며, 이 클래스는 target를 선택하고 스타일을 지정하는 데 사용할 수 있습니다!
이미 display 속성에 대해 생각하고 있습니까? 😉
해보자!

<a href="#the-code">Reveal the code !</a>

<div id="the-code">
    <p>This block of code is displayed after you click on the link</p>

    <a href="#hide-the-code">Hide the code !</a>
</div>

#the-code {
    display: none;
}

#the-code:target {
    display: block;
}

그래서 이것은 어떻게 작동합니까?!
매우 간단합니다.

hash-link가 있습니다.

<a href="#the-code">Reveal the code !</a>

div와 ID가 일치하는 hash-link가 있습니다.

<div id="the-code">...</div>

기본적으로 다음 항목div을 숨깁니다.

#the-code {
    display: none;
}

그런 다음 hash-link가 대상이 되면 표시합니다.

#the-code:target {
    display: block;
}

또한 div a hash-link 에 해당하지 않는 target 끝에 추가했습니다.

<a href="#hide-the-code">Hide the code !</a>

이것을 클릭하면 target 가 변경되고 코드 블록이 원래 상태인 숨겨진 상태로 돌아갑니다. 이 hash-link 가 ID 와 일치하지 않기 때문입니다.

참고: the original post에서 데모를 사용할 수 있습니다.

유용하게 사용하시길 바랍니다.

SYA,
LebCit.