display:none

HTML&CSS&JS

[JS] 버튼 클릭 시 요소(내용) 보이기 구현(display none, block)

See the Pen Untitled by 모카 (@akauwwdc-the-encoder) on CodePen. button과 JS를 이용해 버튼을 클릭하면 원하는 내용이 나오도록 하는 기능을 구현하는 코드이다 ! onclick시 showContent 함수가 실행되는데, A버튼 B버튼은 같은 기능을 하지만 각각 눌렀을 때 보여줄 요소가 다르기 때문에 함수의 매개 변수를 이용해 이를 구분해준다. 숨기고 보여줄 요소인 div를 우선 display:none;으로 숨긴 뒤 버튼을 눌렀을 때 받은 매개변수가 A라면(A button onclick) A 내용을 display:block; 받은 매개변수가 B라면(B button onclick) B 내용을 display:block;로 작동시켜서 보이도록 해준다.

모캉이
'display:none' 태그의 글 목록