[자바스크립트] for문 이용하여 탭 기능 만들어보기

for문을 써 보자.

for(let i=0;i<n;i++){
    . . .
}

우리가 익히 알고있는 그 반복문과 매우 비슷하다

(변수는 var로 선언해도 되지만 상황에 따라서 정상작동하지 않을 수 있으니 상황에 맞게 쓰면 된다.)

 

 

---

<div class="container mt-5">
        <ul class="list">
            <li class="tab-button">Products</li>
            <li class="tab-button orange">Information</li>
            <li class="tab-button">Shipping</li>
        </ul>
        <div class="tab-content">
            <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content show">
            <p>스펙설명입니다. Information</p>
        </div>
        <div class="tab-content">
            <p>배송정보입니다. Shipping</p>
        </div>
    </div>

이런 탭이 있다고 하자.

 

첫번 째 탭 버튼 클릭시에 첫번째 탭 버튼에 orange클래스를 붙이고, 첫번째 탭 콘텐츠에 show클래스를 붙이면 된다.

...이것을 3번째 버튼까지 똑같이 작성하면 되는데,

for문을 사용해서 간단하게 작성 해 보자.

 

for (let i = 0; i < 3; i++) {
    $('.tab-button').eq(i).on('click', function () {
        $('.tab-button').removeClass('orange');
        $(this).addClass('orange');
        $('.tab-content').removeClass('show');
        $('.tab-content').eq(i).addClass('show');
    });

}

이렇게 하면 된다.

.eq(i)는 인덱스를 나타내는 것이라고 보면 된다.