탭기능 만들며 배우는 for 반복문

탭기능 만들기

탭 기능또한 다른 UI 와 같이 미리 원하는 수의 버튼과 해당 버튼에 따른 콘텐츠를 미리 만들어 놓고 해당 버튼이 클릭 되었을 때 해당 버튼에 맞는 콘텐츠를 보여주면 된다. 

 

탭 기능 - HTML

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

 

탭 기능 - css

ul.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}

ul.list::after {
  content: '';
  display: block;
  clear: both;
}

.tab-button {
  display: block;
  padding: 10px 20px 10px 20px;
  float: left;
  margin-right: -1px;
  margin-bottom: -1px;
  color: grey;
  text-decoration: none;
  cursor: pointer;
}

.orange {
  border-top: 2px solid orange;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid white;
  border-left: 1px solid #ccc;
  color: black;
  margin-top: -2px;
}

.tab-content {
  display: none;
  padding: 10px;
}

.show {
  display: block;
}

 

 

위의 코드를 작성하고 실행시켜 보면 아래의 화면이 나오게 된다. 

 

코드를 잘 살펴보면 tab-button의 class에는 orange가 추가되면 추가된 부분에 선택된 듯한 효과가 나타나진다. 

또한 tab-content의 class에는 show가 추가되면 해당 부분에 설정된 텍스트가 나온다. 

 

따라서 해당 버튼이 클릭되면 기존에 추가되어 있던 orange와 show를 삭제하고 클릭된 버튼과 content에 다시 추가하면 된다.

 

그렇다면 기존에 이미 있던 버튼을 어떻게 찾을까?

💡 찾지 않는다. 찾지 않고 모든 버튼과 content에 있는 orange와 show를 삭제하고 그 후에 다시 추가하면 된다.

따라서 아래의 로직을 따른다. 

 

1. 모든 tab-button의 orange 클래스를 삭제한다.
2. 클릭된 tab-button에 orange 클래스를 추가한다.
3. 모든 tab-content의 show 클래스를 삭제한다.
4. 클릭된 tab-content의 show 클래스를 추가한다.

 

코드로 변경하면 아래와 같다.

$('.tab-button').eq(0).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(0).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(0).addClass('show');
});

$('.tab-button').eq(1).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(1).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(1).addClass('show');
});

$('.tab-button').eq(2).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(2).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(2).addClass('show');
});

 

위의 코드도 잘 작동한다. 하지만 매번 selector로 찾아서 클래스를 추가하고 삭제하면 나중에는 굉장히 느려진다. 따라서 아래와 같이 변수에 selector를 저장하고 해당 변수만 반복하는 것이 성능에 좋다.

 

const tab_button = $('.tab-button');
const tab_content = $('.tab-content');

$('.tab-button').eq(0).on('click', function(){
    tab_button.removeClass('orange');
    tab_button.eq(0).addClass('orange');
    tab_content.removeClass('show');
    tab_content.eq(0).addClass('show');
});

$('.tab-button').eq(1).on('click', function(){
    tab_button.removeClass('orange');
    tab_button.eq(1).addClass('orange');
    tab_content.removeClass('show');
    tab_content.eq(1).addClass('show');
});

$('.tab-button').eq(2).on('click', function(){
    tab_button.removeClass('orange');
    tab_button.eq(2).addClass('orange');
    tab_content.removeClass('show');
    tab_content.eq(2).addClass('show');
});

 

for 반복문으로 코드 줄여보기

 

위의 코드를 보면 유일하게 변경되는 부분이 있다. eq 내부에 있는 숫자가 유일하게 변경되는데 이 부분은 아래와 같이 for 문을 사용하면 코드를 줄일 수 있다.

const tab_button = $('.tab-button');
const tab_content = $('.tab-content');

for (let i = 0; i < 3; 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');
    });
}

 

 

확장성 있는 코드

만약에 탭이 3개가 아니라 3개 그 이상일 경우에는 위의 js파일이 실행되지 않는다. for 문은 3번만 실행되기 때문이다. 따라서 확장성있는 코드를 만들려면 반복문을 탭 클래스 개수에 따라서 실행하도록 만들면 된다.

 

const tab_button = $('.tab-button');
const tab_content = $('.tab-content');
let tab_count = $('.tab-button').length; 

for (let i = 0; i < tab_count; 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');
    });
}