[jquery]탭메뉴 fade-in fade-out 적용

html

<!-- TAB  -->
<div class="col-sm-6">
    <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
        <label class="btn btn-sm btn-primary btn-simple active" id="0">
            <input type="radio" name="options" checked>
            <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">탭메뉴1</span>
            <span class="d-block d-sm-none">
                <i class="tim-icons icon-single-02"></i>
            </span>
        </label>
        <label class="btn btn-sm btn-primary btn-simple" id="1">
            <input type="radio" class="d-none" name="options">
            <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">탭메뉴2</span>
            <span class="d-block d-sm-none">
                <i class="tim-icons icon-tap-02"></i>
            </span>
        </label>
    </div>
</div>


<div class="tab-contents">
	<div id="cont0" class="tab-pane fade in active show">탭메뉴1 내용</div>
	<div id="cont1" class="tab-pane fade">탭메뉴2 내용</div>
</div>


<div class="tab-contents">
	<div id="cont0" class="tab-pane fade in active show">탭메뉴1 내용</div>
	<div id="cont1" class="tab-pane fade">탭메뉴2 내용</div>
</div>

 

 

 

 

자바스크립트

<script>
    $(function(){
        // tab 메뉴를 클릭하였을 때 동작함
        $(".btn-group-toggle .btn").click(function(){ 
            
        	 var activeTab = $(this).attr('id');
             $('.btn-group-toggle .btn').removeClass('active');
             $('.tab-contents .tab-pane').fadeOut("fast").removeClass('active').removeClass('show').fadeOut("fast");
             $(this).addClass('active');
             $('#cont' + activeTab).fadeIn("fast").addClass('active').addClass('show');
             
        });
    });
    

</script>