[JavaScript] 탭기능 만들기

Event Listener()

 버튼을 클릭할 때는 클릭 "이벤트"가 발생할 때 어떤한 액션을 위한 함수를 호출하는데 그 함수가 이벤트 리스너입니다.

 이벤트 리스너를 호출 시에 이벤트 리스너를 해당 객체나 요소에 등록해야 합니다.

 

 

객체, 요소에 등록하는 방법

1) addEventListener() 이벤트 리스너 사용

const aElement = document.querySelector('a');
aElement.addEventListener('click', () => }
	alert('a element clicked')
});

 

2) 자바스크립트 코드에서 프로퍼티 등록

window.onload =  function() {
	let text = document.getElementById("text");
    text.innerHTML = "HTML 문서 loaded";
}

 

 3) HTML 태그에 속성으로 등록

<button onclick="alert('버튼이 클릭했습니다')">버튼입니다.</button>

 

 

메뉴 클릭시에 해당 글 보이도록 탭기능 만들기!

초록이 about 노랑이 btns 파랑이 content

 

먼저 요소에 접근할 수 있도록 querySelector를 사용해줍니다.

const about = document.querySelector('.about');
const btns = document.querySelectorAll('.tab-btn');
const articles = document.querySelectorAll('.content');

 

 

addeventListener를 사용하여 클릭 이벤트가 발생할 때마다 클릭한 data-id를 불러오게 됩니다.

about.addEventListener("click" , (e) =>{
   console.log(e.target.dataset.id);
})

 

 

메뉴 클릭 시에 색이 변하도록  클릭한 요소에만 css주기

 

클릭했을 때 active이라는 css를 지워주기 위해서 id를 선언해주고 만약에 id가 있다면 btns에서 active명을 가진 css를 다 지우도록 했습니다.

about.addEventListener("click", (e) => {
    const id = e.target.dataset.id;

    if (id) {
        btns.forEach((btn) => {
            btn.classList.remove("active");
        })
    }
})

 

 

 

이제 e.target.classList.add를 통해 클릭한 요소에 active라는 css를 추가해줍니다. 

about.addEventListener("click", (e) => {
    const id = e.target.dataset.id;

    if (id) {
        btns.forEach((btn) => {
            btn.classList.remove("active");
        })
        e.target.classList.add("active");
    }
})

 

 

클릭 시에 해당 content에 내용으로 변경하기

모든 콘텐츠 요소에서 'active' 클래스를 제거하고 클릭된 탭에 해당하는 콘텐츠 요소를 선택한 후 선택한 요소에active를 추가합니다. 

about.addEventListener("click", (e) => {
    const id = e.target.dataset.id;

    if (id) {
        btns.forEach((btn) => {
            btn.classList.remove("active");
        })
        
        e.target.classList.add("active");

        articles.forEach((articles) => {
            articles.classList.remove("active");
        })
        const element = document.getElementById(id);
        element.classList.add("active");

    }
})

 

 

완성!!!