자바스크립트를 이용한 버튼 클릭 시 내용 보이기

안녕하세요! 이번에는 자바스크립트를 이용한 간단한 웹페이지 제작에 대해 소개해드릴게요. 이번 코드는 버튼을 클릭하면 해당 내용이 나오도록 하는 기능을 구현한 코드입니다.

먼저 코드를 보면, const 키워드를 이용해 버튼, 컨텐츠, 닫기 버튼을 변수에 할당하고 있습니다. 그리고 버튼과 컨텐츠 각각에 대한 NodeList를 반환하는 querySelectorAll 메소드를 이용해 선택자를 지정해주고 있습니다.

그 다음으로는 버튼과 컨텐츠에 대한 클릭 이벤트를 처리하는 함수를 구현하고 있습니다. hide 함수는 모든 컨텐츠의 on 클래스를 제거하여 감추는 역할을 하고, show 함수는 특정 인덱스의 컨텐츠에 on 클래스를 추가하여 보이게 하는 역할을 합니다.

이후 forEach 메소드를 이용해 버튼들에 대해 클릭 이벤트를 등록하고, 클릭 시 해당 버튼의 인덱스를 인자로 받아 show 함수를 호출합니다. 또한 닫기 버튼에 대해서는 forEach 메소드를 이용해 클릭 이벤트를 등록하고, 클릭 시 해당 인덱스의 컨텐츠에 대해 on 클래스를 제거하는 역할을 합니다.

 

이번에는 자바스크립트를 이용해 버튼을 클릭하면 해당 내용을 보여주는 기능을 구현해보겠습니다.

우선 코드를 살펴보면, 버튼과 컨텐츠, 닫기 버튼에 대한 NodeList를 반환하는 querySelectorAll 메소드를 이용해 선택자를 지정해주고 있습니다.

const $Btn = document.querySelectorAll(".bt > li");
const $content = document.querySelectorAll(".content");
const $Close = document.querySelector(".closeAll");

 

다음으로는 hide 함수와 show 함수를 구현하고 있습니다. hide 함수는 모든 컨텐츠의 on 클래스를 제거하여 감추는 역할을 하고, show 함수는 특정 인덱스의 컨텐츠에 on 클래스를 추가하여 보이게 하는 역할을 합니다.

function hide() {
  $content.forEach((a) => {
    a.classList.remove("on");
  });
}

function show(num) {
  $content.forEach((a) => {
    a.classList.remove("on");
  });
  $content[num].classList.add("on");
}

 

forEach 메소드를 이용해 버튼들에 대해 클릭 이벤트를 등록하는 부분을 설명해드리겠습니다.

각 버튼을 클릭할 때마다 해당 인덱스의 컨텐츠가 보이도록 show 함수를 호출하고 있습니다. 또한 닫기 버튼에 대해서도 forEach 메소드를 이용해 클릭 이벤트를 등록하고, 클릭 시 해당 인덱스의 컨텐츠에 대해 on 클래스를 제거하는 역할을 합니다.

 

이제 각 버튼을 클릭하면 해당 컨텐츠가 보이도록 구현되었습니다. 이 코드를 응용하면 여러 가지 다양한 웹페이지를 만들 수 있으니 참고하시면 좋겠습니다.