탭메뉴 질문드립니다.
본문
위와 같이 탭메뉴를 만들려고 합니다.
메뉴를 눌렀을때 메뉴 효과는 만들었는데
메뉴를 눌렀을때 아래 슬라이드가 보이게 하는 방법을 노가다 말고는
방법을 모르겠어서 질문드립니다.
<ul class="main_tab">
<li class="tab_btn">탭1</li>
<li>·</li>
<li class="tab_btn">탭2</li>
<li>·</li>
<li class="tab_btn">탭3</li>
</ul>
<div class="main_tab_slide">
<div class="tab1"><? include_once(G5_THEME_PATH.'/inc/tab_slide.php'); ?></div>
<div class="tab2"><? include_once(G5_THEME_PATH.'/inc/tab2_slide.php'); ?></div>
<div class="tab3"><? include_once(G5_THEME_PATH.'/inc/tab3_slide.php'); ?></div>
</div>
<style>
.main_tab { width: 100%; }
.main_tab li { display: inline-block; margin: 45px 15px 0 0; opacity: 0.7;}
.main_tab li:nth-child(odd) { cursor: pointer;}
.main_tab li:nth-child(odd):hover { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;}
.main_tab li:nth-child(1) { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;}
.main_tab_slide>div { display: none; }
.main_tab_slide .tab1 { display: block; }
</style>
<script>
$(document).ready(function(){
$('.main_tab .tab_btn').click(function(){
$(this).css({'opacity':'1', 'border-bottom':'1px solid #fff', 'padding-bottom':'5px'});
$(this).siblings('.tab_btn').css({'opacity':'0.7', 'border-bottom':'none'});
})
})
</script>
스크립트는 위와 같습니다.
tab_btn을 눌렀을때 tab_btn의 css가 각각 바뀌는건 했는데,
tab_btn이 바뀌면서 main_tab_slide의 div가 각각 나타나게 하려면
어떻게 해야 할까요?
tab_btn와 main_tab_slide의 번호가 같을때
tab_btn을 클릭하면 같은 번호의 main_tab_slide가 나타나라! 라는 if문을 줘야하는걸까요?
if문을 줘야하면 어떻게 줘야하는걸까요?
어디서 들은건 있는데 해본적이 없어서 감이 안잡힙니다.. ㅠㅠ
답변 1
지금 · 이걸 li 태그로 주셨는데.. 이건 그냥 css로 처리하시구요
<ul class="main_tab">
<li class="tab_btn">탭1</li>
<li class="tab_btn">탭2</li>
<li class="tab_btn">탭3</li>
</ul>
<div class="main_tab_slide">
<div class="tab1"><? include_once(G5_THEME_PATH.'/inc/tab1_slide.php'); ?></div>
<div class="tab2"><? include_once(G5_THEME_PATH.'/inc/tab2_slide.php'); ?></div>
<div class="tab3"><? include_once(G5_THEME_PATH.'/inc/tab3_slide.php'); ?></div>
</div>
<style>
.main_tab { width: 100%; }
.main_tab li { display: inline-block; margin: 45px 15px 0 0; opacity: 0.7;}
.main_tab li:nth-child(odd) { cursor: pointer;}
.main_tab li:nth-child(odd):hover { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;}
.main_tab li:nth-child(1) { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;}
.main_tab_slide>div { display: none; }
.main_tab_slide .tab1 { display: block; }
</style>
<script>
$(document).ready(function(){
$('.main_tab .tab_btn').click(function(){
var index = $(this).index(); //현재 클릭된 요소의 순서값
$(this).css({'opacity':'1', 'border-bottom':'1px solid #fff', 'padding-bottom':'5px'});
$(this).siblings('.tab_btn').css({'opacity':'0.7', 'border-bottom':'none'});
$(".main_tab_slide").children("div").css('display', 'none'); //모든 슬라이드 안보이게함
$(".main_tab_slide").children("div").eq(index).css('display','block'); //클릭된 탭의 순서값에 위치한 슬라이드를 보여줌
})
})
</script>