2

プロジェクトでは、3つの親タブ（P）が必要であり、それぞれに3つの子タブ（c）のセットが含まれています。

問題：ユーザーがP1c3で終了し、別の親セットに移動してからP1に戻ると、c3はまだアクティブです。P1が開いたときにデフォルトのアクティブな子をc1にリセットする方法を知っている人はいますか？

基本的な構造、異常なことは何もありません。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li><a href="#P1" data-toggle="tab">P1</a></li>
    <li><a href="#P2" data-toggle="tab">P2</a></li>
    <li><a href="#P3" data-toggle="tab">P3</a></li>
  </ul>

<div class="tab-content tab-container">

  <div class="tab-pane" id="P1">
      <div class="tabbable tabs-left"> 
          <ul class="nav nav-tabs">
              <li class="active"><a href="#c1" data-toggle="tab">c1</a></li>
              <li><a href="#c2" data-toggle="tab">c2</a></li>
              <li><a href="#c3" data-toggle="tab">c3</a></li>
          </ul>
          <div class="tab-content tab-info">
              <div class="tab-pane active" id="c1">
                P1 child 1                                       
              </div>
              <div class="tab-pane" id="c2">
                P1 child 2
              </div>
              <div class="tab-pane" id="c3">
                P1 child 3
              </div>
          </div>
      </div>
  </div>

etc...
4

1 に答える 1

2

親アイテムをクリックしたら、最初の子タブで $.trigger を呼び出して、最初のタブにリセットします。非常に大雑把ですが、うまくいけばアイデアが得られます。

<ul class="nav parent nav-tabs">
   <li><a href="#P1" data-toggle="tab">P1</a></li>
   <li><a href="#P2" data-toggle="tab">P2</a></li>
   <li><a href="#P3" data-toggle="tab">P3</a></li>
</ul>

<ul class="nav child nav-tabs">
   <li class="active"><a href="#c1" data-toggle="tab">c1</a></li>
   <li><a href="#c2" data-toggle="tab">c2</a></li>
   <li><a href="#c3" data-toggle="tab">c3</a></li>
</ul>

$(".parent li a").on("click", function () { $(".child li a").first().trigger("click"); });

于 2012-06-28T15:25:34.737 に答える