[따라만들기] tabs menu

https://youtu.be/T4I5psIHOVA

 

//1. 탭 메뉴를 클릭하면 속성이 href인데 이는 #이 붙어있음
//2. #을 때주고 그 속성명이 있는 클래스를 찾아간다.
//3. 그 클래스를 display = "block"으로 해서 보여지게 한다.
//4. 그런데 그 전에 기존에 보여졌던건 안보이게 한다.

const targetLink = document.querySelectorAll(".tab-menu a");
const tabConten = document.querySelectorAll("#tab-content > div");

for (let i = 0; i < targetLink.length; i++) {

    targetLink[i].addEventListener("click", (event) => {
        event.preventDefault();
        let orgTarget = event.target.getAttribute('href');
        console.log(orgTarget)

        let tabTarget = orgTarget.replace("#", "");

        //이전꺼는 모두 안보이게 한다
        for (let j = 0; j < tabConten.length; j++) {
            tabConten[j].style.display = "none";
        }

        document.getElementById(tabTarget).style.display = "block";

        activeMenu(event)
    });
}

const activeMenu = (event) => {
    //메뉴 눌렀을때 색 활성화
    //active 다 지워주고 클릭한 target에만 active 지정
    for (let k = 0; k < targetLink.length; k++) {
        targetLink[k].classList.remove("active");
        event.target.classList.add("active");       //내가 클릭한것만 active
    }
}

document.getElementById("tabs-1").style.display = "block"