[jQuery] tab menu 만들기

 

See the Pen 1029_탭 만들기 by limhaneul2244 (@limhaneul2244) on CodePen.

 

$(document).ready(function(){                       // 0
    $('.list .tab-button').click(function(){        // 1
        let indexVal = $(this).attr('data-tab');
        
        $('.list li').removeClass('active');       // 2
        $('.tab-content').removeClass('show');     // 3
        $(this).addClass('active');                // 4
        $('#' + indexVal).addClass('show');        // 5
    });
});

//방법2 :: tabContents의 길이를 체크해 탭길이가 늘어나도 적용가능하게 한다.

let tabBtn = $('.tabBtn');
let tabContents = $('.tabCon');
for(let i = 0; i< tabContents.length; i++) {
    tabBtn.eq(i).on('click', function(){
        tabBtn.removeClass('active');
        tabBtn.eq(i).addClass('active');
        tabContents.removeClass('show');
        tabContents.eq(i).addClass('show');
    });
}

0. html에 active 와 show를 붙여놓아서 document는 먼저 첫번째 tab을 보여주게 된다.

1. 위의 함수는 tab-button 을 클릭할 때 실행이 된다.

2. .list 의 자식 요소인 li에 active를 없애준다.

3. .tab-content의 show를 없애준다.

4. .tab-content에 active를 붙여준다.

5. $('#' + indexVal) -> id에 data-tab을 매칭시켜 클릭하는 .tab-button에 show를 붙인다.

 

 

data-tab은 탭과 하위 list가 매칭되어야 한다.