탭메뉴 질문드립니다.

탭메뉴 질문드립니다.

QA

탭메뉴 질문드립니다.

본문

1794421415_1591344926.5943.png

 

위와 같이 탭메뉴를 만들려고 합니다.

메뉴를 눌렀을때 메뉴 효과는 만들었는데

메뉴를 눌렀을때 아래 슬라이드가 보이게 하는 방법을 노가다 말고는 

방법을 모르겠어서 질문드립니다.

 

<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>

답변을 작성하시기 전에 로그인 해주세요.
전체 123,131 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT