이 5줄의 코드 해석좀 부탁드립니다.
본문
var activeTab = $(this).attr('data-tab');
$('ul.tab li').removeClass('current');
$('.tabcontent').removeClass('current');
$(this).addClass('current');
$('#' + activeTab).addClass('current');
초보자라 너무 어렵네요 ㅜㅜ
부탁드립니다 ㅜㅜ
답변 2
var activeTab =
$(this).attr('data-tab'); // 이 선택자의 data-tab 속성값을 가져오고
$('ul.tab li').removeClass('current'); // ul.tab li 선택자의 current 클래스를 제거하고
$('.tabcontent').removeClass('current'); // .tabcontent 선택자의 current 클래스를 제거하고
$(this).addClass('current'); // 이 선택자에 current 클래스를 추가하고
$('#' + activeTab).addClass('current'); // activeTab 아이디 선택자에 current 클래스를 추가
이 모든 것을 해서 activeTab 이라는 변수 생성
dom 구성을 봐야 정확히 알겠지만
기존에 활성화 되어 있는 걸 비활성화 하고 현재 클릭한 탭을 활성화하는 코드 같네요.
var activeTab = $(this).attr('data-tab'); //현재 엘리먼트의 data-tab 속성을 가져온다
$('ul.tab li').removeClass('current'); //기존에 li 엘리먼트의 current 클래스를 제거한다.
$('.tabcontent').removeClass('current'); // 클래스명이 tabcontent 인것의 current 클래스를 제거한다.
$(this).addClass('current'); //현재 엘리먼트에 current 클래스를 추가한다.
$('#' + activeTab).addClass('current'); // activeTab 에 해당하는 엘리먼트의 current 클래스를 추가한다.