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