멀티탭 jquery : 각 하위 탭의 첫 번째 요소는 어떻게 표시합니까?

Question

페이지에 중첩 된 탭 (예 : JSFIDDLE)을 사용하려고하는데 문제가 있습니다. 탭을 선택하면 첫 번째 하위 탭을 표시하고 다른 하위 탭을 숨기는 방법을 알 수 없습니다. 미리 감사드립니다.
내 코드 :

jQuery(function(){ 
jQuery('.nav-tab').click(function(){ 
     jQuery('.tabs').hide(); 
     jQuery('#tab-'+$(this).attr('target')).fadeIn(350); 
}); 
jQuery('.sub-nav').click(function(){ 
     jQuery('.sub-tab').hide(); 
     jQuery('#sub'+$(this).attr('target')).fadeIn(350); 
}); 

});

HTML 코드 :

<ul id="nav-box"> 
    <li><a class="nav-tab" target="1">tab1</a></li> 
    <li><a class="nav-tab" target="2">tab2</a></li> 
    <li><a class="nav-tab" target="3">tab3</a></li> 
</ul> 
<div class="tabs" id="tab-1"> 
    <div class="left-col"> 
    <ul class="sub-list"> 
     <li><a class="sub-nav" target="tab1">subnav1</a></li> 
     <li><a class="sub-nav" target="tab2">subnav2</a></li> 
     <li><a class="sub-nav" target="tab3">subnav3</a></li> 
    </ul> 
    </div> 
    <div class="sub-tab" id="subtab1">sub tab 1</div> 
    <div class="sub-tab" id="subtab2">sub tab 2</div> 
    <div class="sub-tab" id="subtab3">sub tab 3</div> 
</div> 
<div class="tabs" id="tab-2"> 
    <div class="left-col"> 
    <ul class="sub-list"> 
     <li><a class="sub-nav" target="tab4">subnav4</a></li> 
     <li><a class="sub-nav" target="tab5">subnav5</a></li> 
     <li><a class="sub-nav" target="tab6">subnav6</a></li> 
    </ul> 
    </div> 
    <div class="sub-tab" id="subtab4">sub tab 4</div> 
    <div class="sub-tab" id="subtab5">sub tab 5</div> 
    <div class="sub-tab" id="subtab6">sub tab 6</div> 
</div> 
<div class="tabs" id="tab-3"> 
    <div class="left-col"> 
    <ul class="sub-list"> 
     <li><a class="sub-nav" target="tab7">subnav7</a></li> 
     <li><a class="sub-nav" target="tab8">subnav8</a></li> 
     <li><a class="sub-nav" target="tab9">subnav9</a></li> 
    </ul> 
    </div> 
    <div class="sub-tab" id="subtab7">sub tab 7</div> 
    <div class="sub-tab" id="subtab8">sub tab 8</div> 
    <div class="sub-tab" id="subtab9">sub tab 9</div> 
</div> 

과 스타일 :

이

#nav-box li  {display:inline;list-style-type:none;} 
.nav-tab,.sub-nav {cursor:pointer;margin:0 20px;} 
.tabs    {display:none;} 
.left-col   {float:left;} 
.sub-tab   {position:relative;top:10px;left:40px;z-index:-1;} 

Answer 1

이 당신을 위해 그것을해야한다. 선택한 탭 내에서 모든 .sub-tab 요소를 숨기고 첫 번째 탭을 표시하면됩니다. 여기

jQuery('.nav-tab').click(function(){ 
     jQuery('.tabs').hide(); 
     var $targetTab = jQuery('#tab-'+$(this).attr('target')); 
     $targetTab.find('.sub-tab').hide().first().show(); 
     $targetTab.fadeIn(350); 
}); 

는 바이올린 개정 http://jsfiddle.net/6yQ8k/40/