tab 메뉴 어떤 오류가 있는걸까요?
본문
이미지와 같이 tab01을 눌렀을 땐 정상적으로 뜨는데 tab02와 tab03을 클릭했을 땐 컨텐츠가 뜨지않습니다.
혹시 어떻게 수정해야하는지 알려주실 수 있으신가요?
<div class="bna-slide">
<ul class="tabs tabs01">
<li class="tab-link current" data-tab="tab-1">tab01</li>
<li class="tab-link" data-tab="tab-2">tab02</li>
<li class="tab-link" data-tab="tab-3">tab03</li>
</ul>
<div id="tab-1" class="tab-content tab-content01 current">
<div class = "container">
<img src="<?php echo G5_URL;?>/resource/img/sub/bna01-1.jpg" alt="Before"/>
<img src="<?php echo G5_URL;?>/resource/img/sub/bna01-2.jpg" alt="After"/>
</div>
</div>
<div id="tab-2" class="tab-content tab-content02">
<div class = "container">
<img src="<?php echo G5_URL;?>/resource/img/sub/bna01-1.jpg" alt="Before"/>
<img src="<?php echo G5_URL;?>/resource/img/sub/bna01-2.jpg" alt="After"/>
</div>
</div>
<div id="tab-3" class="tab-content tab-content03">
<div class = "container">
<img src="<?php echo G5_URL;?>/resource/img/sub/bna01-1.jpg" alt="Before"/>
<img src="<?php echo G5_URL;?>/resource/img/sub/bna01-2.jpg" alt="After"/>
</div>
</div>
</div>
<script>
$(function() {
$('ul.tabs01 li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs01 li').removeClass('current');
$('.tab-content01').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
});
</script>
답변 1
일단
$('.tab-content01').removeClass('current');
이부분을
$('.tab-content').removeClass('current');
로 고쳐야할것같고,
current 클래스에에따라 보여지고 안보여지고가 css로 정의 되어 있나요?
그렇지 않다면 show, hide 해주셔야할거같아요
.tab-content{
display: none;
padding: 30px 25px 0 0;
}
.tab-content.current{
display: inherit;
}
이렇게 되어있습니다. 이 부분을 지우면 될까요...?
정말 죄송한데 show, hide는 어떻게 하는건지 알려주실 수 있으신가요...
답변을 작성하시기 전에 로그인 해주세요.