javaScript/jQuery
[jquery]탭메뉴 fade-in fade-out 적용
mooyou
2021. 10. 23. 22:28
728x90
300x250
SMALL
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>
728x90
반응형
LIST