탭메뉴 작업시 문의사항입니다.
본문
<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>
탭메뉴 작업중인데 콘텐츠를 넣으면 탭 아래의 콘텐츠내용부터 노출이 됩니다.
탭메뉴부터 노출이 되게 하려면 어떻게 해야 할지 고견부탁드립니다.
!-->
답변을 작성하시기 전에 로그인 해주세요.