탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery

Question

안녕하세요, 선생님. 항상 양질의 강의 감사드립니다.

이전 강의들을 따라하면서 제이쿼리 탭구조가 어느 정도 익숙해져서 이번 강의는 결과물만 보고 혼자서 미리 만들어보았는데요.

강의 22:05 부분을 보면 선생님은

var result = $(this).attr('data-alt')
$('.tabs div').removeClass('active')
$('#' + result).addClass('active')

라고 코드를 작성하셨더라고요.

var result = $(this).attr('data-alt')
$('#' + result).addClass('active')
$('#' + result).siblings().removeClass('active');

이건 제가 짠 코드인데요.

선생님이 하신 것처럼 removeClass를 먼저 줘서 active를 삭제한 뒤 클릭한 하나에만 addClass로 active를 추가하는 것과

addClass를 먼저 준 후 형제 요소들은 removeClass로 active를 삭제하는 것에 차이가 있을까요?

문제없이 작동하긴 합니다만, 혹시 제가 모르는 차이가 있을지 궁금해서 질문 남깁니다!

Answer

네. 강의 영상에서는 체이닝(chainning)을 사용해서 하면 처음이신 분들이 익숙하지 않을까봐 한 줄 더 적었어요. 좀 더 바람직한 방식은 수강생분께서 위에 적으신 것 처럼 체이닝을 활용하는게 더 좋습니다.