Tab기능 만들기

tab기능을 만들기전에 UI를 인강에서 먼저 만들어주셔서 기능개발만 해보자

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

HTML을 간단히 설명하면 container안에 list들 상단 버튼들과 버튼을 누르면 나올 tab-content들을 div박스로 하나씩 만들어 놓았다. 

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;
  }
  .active {
	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;
  }

그러고 css에서 ul에 border-bottom을 줘서 회색 선을 만들어주고, tab-button들에 색과 패딩,마딩을 적절히 주고 float를 줘서 가로 배치를 시켜준다.

그러곤 active란 css를 만들어서 선택되면 위에 와 양옆 border이 바뀌게 설정해주고, 각각의 tab-content들도 display: none;으로 숨겨놓고 show라는 클래스가 붙으면 보이게끔 해놓는다. 이러고 기능개발을 해보자.

 

tab-button을 누를 때 실행되어야 하는 건 누른 tab-button에 active클래스가 붙고, 해당 tab-content가 show되어야 한다. 

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

제이쿼린 셀렉턴 전체를 선택하기 때문에, eq를 이용해 지정해주고 클릭하면 전체 active,show를 먼저 지워준 후, 해당 부분에 eq를 이용해 클래스를 부착해주면 된다. 하지만 코드가 반복되므로 함수로 만들거나 반복문을 사용해 줄 수 있겠다.

//반복문 사용
for (let i = 0; $('.tab-button').length; i++) {
    $('.tab-button').eq(i).on('click', function() {
        $('.tab-button').removeClass('active');
        $('.tab-content').removeClass('show');
        $('.tab-button').eq(i).addClass('active');
        $('.tab-content').eq(i).addClass('show');
    });
} 

//함수로 만들면
function 탭열기(숫자) {
    $('.tab-button').removeClass('active');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(숫자).addClass('active');
    $('.tab-content').eq(숫자).addClass('show');
}

//반복문에 함수로 합치면
for (let i = 0; i < $('.tab-button').length; i++) {
    $('.tab-button').eq(i).on('click',function() {
        탭열기(i);
    });
};

위 처럼 만들면 짧게 줄일 수 있다.