2

ページでネストされたタブ（ここでは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;}
4

1 に答える 1

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/

于 2013-03-25T17:17:44.363 に答える