WebPublisher
[jQuery] tab contents 탭 선택
amanda
2021. 3. 24. 17:29
// tab menu
$('.js-tab-menu > li').on('click',function(e){
var cnt = $(this).index();
$(this).addClass('on');
$(this).siblings('li').removeClass('on');
$('.js-tab-con').hide().eq(cnt).stop().fadeIn();
});
// select con
var activeSelect = $('.js-select-list > li.on').text();
$('.js-btn-select > span').text(activeSelect);
$('.js-btn-select').on('click',function(e){
$(this).toggleClass('on');
$(this).next('ul').stop().slideToggle();
});
$('.js-select-list > li').on('click',function(e){
var cnt = $(this).index();
var activeSelect = $(this).children('a').text();
$('.js-btn-select > span').text(activeSelect);
$('.js-btn-select').removeClass('on');
$(this).siblings().removeClass('on');
$(this).addClass('on');
$('.js-select-con').hide().eq(cnt).stop().fadeIn();
$(this).parent('ul').stop().slideUp();
});
$('body').on('click',function(e){
if($('.js-select-wrap').has(e.target).length == 0){
$('.js-btn-select').removeClass('on');
$('.js-select-list').stop().slideUp();
}
});