[jQuery] filter 활용한 on click 이벤트 tab menu

data-tab 값을 활용해 filter로 해당 data 값 가진 요소 찾는 click event

 

<div class="tab_wrap">
	<button class="btn_tab" data-tab="tab01"></button>
    <button class="btn_tab" data-tab="tab02"></button>
    <button class="btn_tab" data-tab="tab03"></button>
</div>

<div class="tab_content">
	<div class="tab_conbox" data-tab="tab01"></div>
    <div class="tab_conbox" data-tab="tab02"></div>
    <div class="tab_conbox" data-tab="tab03"></div>
</div>

$('.btn_tab').on('click', function(){
    var tabData = $(this).data('tab'),
        tabMenu = $('.tab_menu'),
        tabConbox = $('.tab_conbox');

    tabMenu.children().removeClass('active');
    tabMenu.children().filter('[data-tab=' + tabData + ']').addClass('active');

    tabConbox.hide();
    tabConbox.filter('[data-tab=' + tabData + ']').stop().fadeIn();
})