[反応型]pc-ラベル=>mo-選択ボックス

PC解像度ではタブで、移動解像度から選択ボックスに変換して使用します.

HTML構造

 <section class="tab_wrap">
 	<button type="button" class="tab_selected">전체</button>
    <ul class="tab_menu">
    	<li class="tab is-active"><a href="#">전체</a></li>
        <li class="tab"><a href="#">1</a></li>
        <li class="tab"><a href="#">2</a></li>
        <li class="tab"><a href="#">3</a></li>
        <li class="tab"><a href="#">4</a></li>
        <li class="tab"><a href="#">5</a></li>
        <li class="tab"><a href="#">6</a></li>
    </ul>
</section>

tabとselcetboxは単独で作成されるのではなく、tab menuとして使用されます.
PC解像度ではtab形状のmo解像度でボックスの形状を選択します.

jquery

			const target = $('.tab_wrap');
			const selectedBtn = target.find('.tab_selected');
			const button = target.find('.tab_menu a');

			selectedBtn.on('click', function(){
				if( target.hasClass('active')){       //selectbox 선택자
					target.removeClass('active');
				}else{
					target.addClass('active');
				}	
			});
			
			button.on('click', function(){
				const text = $(this).text();
				const el = $(this).parent();
				if( !el.hasClass('is-active')){      //tab 선택자
					selectedBtn.text(text);
					el.addClass('is-active').siblings().removeClass('is-active');
					target.removeClass('active');
				}	
			});