[코딩애플;JS]반복문 이용하여 탭 기능만들기

해당 강의에서는 for문을 이용하여 제이쿼리로

탭기능을 만들었다.

 

📒탭 기능의 원리는

탭버튼 : 클릭하는 것에 클래스를 붙였다 뗐다 하면서 보여졌다가 사라진다.

탭버튼과 동일한 인덱스번호를 가지고 있는 내용 div도 클래스가 붙였다 뗐다 하면서 보여졌다가 사라진다.

 

💡더 깊이 들어가면

1.i번째 탭버튼을 클릭하면 탭버튼 모든 요소의 클래스를 삭제한다.

2. i번째 탭버튼을 클릭하면 내용div 모든 요소의 클래스를 삭제한다.

3.클릭한 i 번째 탭버튼만 클래스가 붙는다.

4.클릭한 i번째 탭버튼과 같은 인덱스 값을 갖고있는 내용div에만 클래스가 붙는다.

 

의 반복인 기능이다.

 

제이쿼리로 하면,

for (let i = 0; i < $('.tab-button').length; i++){

    $('.tab-button').eq(i).on('click', function(){

      $('.tab-button').removeClass('orange');

      $('.tab-button').eq(i).addClass('orange');

      $('.tab-content').removeClass('show');

      $('.tab-content').eq(i).addClass('show');

    })

 

  };

 

이렇게 하면 된다는데

쌩 자바스크립트로 하려면 문제가 제이쿼리와 달리 한번에 한 요소만 변경이 가능하다는 점이다.

그래서 모든 요소의 클래스를 지워야하는 1번과 2번이 실행이 되지 않는 것이다..

 

결국 구글링해서 여러가지 방법을 찾아보았는데,

진도와 상관없는 forEach문을 사용하여 해결하였다.

 

var btn = document.querySelectorAll('.tab-button'); //탭버튼 배열

var cont = document.querySelectorAll('.tab-content'); //내용div 배열

btn.forEach(function(el,index){

   

    el.addEventListener('click',function(){//버튼 배열을 클릭할 때마다 아래의 함수를 실행한다.

        btn.forEach(function(item){

            item.classList.remove('orange');

        });

        //일단 버튼 배열의 모든 클래스를 지우고,

        cont.forEach(function(item){

            item.classList.remove('show')

        });

        //내용 div 에 있는 클래스를 지운다.

        btn[index].classList.add('orange');

        //클릭한 탭버튼 인덱스의 탭버튼에 클래스 추가.

        cont[index].classList.add('show');

        //클릭한 탭버튼 인덱스의 내용div에 클래스 추가.

    });

});

https://happy-hee8.tistory.com/3

[Javascript] 탭메뉴 만들기

 

다행히 탭을 추가해도 잘 작동을 했지만,

제이쿼리로 기능을 짜다가 자바스크립트로 하니까 이런 불편함이 있구나 깨닫는다.

 

https://gr-st-dev.tistory.com/1143

[JS] 자바스크립트 foreach