Tab

• 위와같은 디자인에서 테스트를 진행했다.

.js 파일

• js 파일을 만들고 src로 연결해주면 더 깔끔하다.

    <script src="tab.js">
        
    </script>

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

});

• eq를 사용하면 동일 클래스에서 indexing 가능하다.

for 문

var buttonSelector = $('.tab-button')

buttonSelector.eq(0).on('click', function() {
    buttonSelector.removeClass('orange');
    buttonSelector.eq(0).addClass('orange');
    buttonSelector.removeClass("show");
    buttonSelector.eq(0).addClass('show');
});

buttonSelector.eq(1).on('click', function() {
    buttonSelector.removeClass('orange');
    buttonSelector.eq(1).addClass('orange');
    buttonSelector.removeClass("show");
    buttonSelector.eq(1).addClass('show');
});

buttonSelector.eq(2).on('click', function() {
    buttonSelector.removeClass('orange');
    buttonSelector.eq(2).addClass('orange');
    buttonSelector.removeClass("show");
    buttonSelector.eq(2).addClass('show');
});

• 위처럼 반복되는 코드는 어떻게 개선해야할까? -> for 문
• for (let i = 0; i < 3; i++) 이런식

var buttonSelector = $('.tab-button')

for (let i = 0; i < 3; i++) {
    buttonSelector.eq(i).on('click', function() {
        buttonSelector.removeClass('orange');
        buttonSelector.eq(i).addClass('orange');
        buttonSelector.removeClass("show");
        buttonSelector.eq(i).addClass('show');
    });
}

• 반복문 변수는 let으로 해야 잘 된다.
• for문은 코드를 반복 실행해준다고 개념을 잡으면 된다. (복붙)