채택완료

탭메뉴 작업시 문의사항입니다.

2021-02-04 (목) 13:32:17 2,139
Copy
<div class="tabmenu">
    <div id="tab" class="pc_tab">
        <ul>
            <li><a href="#tab01">Tab 1</a></li>
            <li><a href="#tab02">Tab 2</a></li>
            <li><a href="#tab03">Tab 3</a></li>
            <li><a href="#tab04">Tab 4</a></li>
            <li><a href="#tab05">Tab 5</a></li>
        </ul>
    </div>
    <div class="sm_select">
        <select id="tabmenu" name="">
            <option value="#tab01">Tab 1</option>
            <option value="#tab02">Tab 2</option>
            <option value="#tab03">Tab 3</option>
            <option value="#tab04">Tab 4</option>
            <option value="#tab05">Tab 5</option>
        </select>
    </div>
</div>
<div class="tab-contents" id="tab01">
    <div class="tab-title">Tab 1</div>    
</div>
<div class="tab-contents" id="tab02">
    <div class="tab-title">Tab 2</div>
</div>
<div class="tab-contents" id="tab03">
    <div class="tab-title">Tab 3</div>
</div>
<div class="tab-contents" id="tab04">
    <div class="tab-title">Tab 4</div>
</div>
<div class="tab-contents" id="tab05">
    <div class="tab-title">Tab 5</div>
</div>

 

 

<script>

    $('.pc_tab li').first().addClass("activeClass");
      $(".tab-contents").not(':first').hide();
  
    $('.pc_tab li').on('click',function(){
      $(this).addClass("activeClass").siblings().removeClass("activeClass");
      var link = $(this).find("a").attr("href");
      var link_num = link.substr(link.length-1);
      $("select#tabmenu option").eq(link_num-1).prop("selected", "selected");
      $(".tab-contents").hide();
      $(link).show();
    });
    
    $("select#tabmenu").on("change",function(){
      var select_link = $("select#tabmenu").val();
      var select_num = $(this).prop('selectedIndex');
      $('.pc_tab li').eq(select_num).addClass("activeClass").siblings().removeClass('activeClass');
      $(".tab-contents").hide();
      $(select_link).show();
      console.log(select_link);
    });

</script>

탭메뉴 작업중인데 콘텐츠를 넣으면 탭 아래의 콘텐츠내용부터 노출이 됩니다.

탭메뉴부터 노출이 되게 하려면 어떻게 해야 할지 고견부탁드립니다.

|

답변 1개

채택된 답변
+20 포인트
2021-02-04 (목) 13:33:55

반응형구분해두신거같은데

css쪽 문제일것같아보입니다

답변을 작성하려면 로그인이 필요합니다.