[解決済み] bootstrapのタブを一意な識別子を使わずに使用する方法はありますか？

質問

ブートストラップタブを使用したいのですが、ユニークセレクタを使用しないでください。

セレクタがdomの中で唯一であることを保証できない。

レンダリング時にページに含まれるか、ajax を介してモーダル内に読み込まれるサブテンプレートが多数あります。

ID は使用していますが、モーダル内で使用するテンプレートでは使用しません。モーダルによっては、ページ読み込みイベントの後にプリロードされます。

  <div class="panel">
    <div class="panel-heading">
       <ul class="nav nav-tabs">
        <li><a data-target=".pane1" data-toggle="tab" aria-expanded="true">pane 1</a></li>
        <li><a data-target=".pane2" data-toggle="tab" aria-expanded="true">pane 2</a></li>
      </ul>     
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane pane1">pane 1</div>
        <div class="tab-pane pane2">pane 2</div>
      </div>
    </div>
  </div>

を試してみました。 onclick イベントをアンカータグに適用することはできますが、これはあまり理想的ではありません。 .tab('show')

onclick="$(this).closest('.panel')
   .find('.tab-pane').hide();$(this).closest('.panel').find('.pane1').show();"

解決方法は？

このHTMLでは可能です。

 <div class="panel">
    <div class="panel-heading">
       <ul class="nav nav-tabs">
        <li><a href="#">pane 1</a></li>
        <li><a href="#">pane 2</a></li>
      </ul>     
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane">pane 1</div>
        <div class="tab-pane">pane 2</div>
      </div>
    </div>
  </div>

このJavascriptを

$('.panel .nav-tabs').on('click', 'a', function(e){
  var tab  = $(this).parent(),
      tabIndex = tab.index(),
      tabPanel = $(this).closest('.panel'),
      tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
  tabPanel.find('.active').removeClass('active');
  tab.addClass('active');
  tabPane.addClass('active');
});

参照 この機能するブートパイプ

備考 をすべて削除したことに注意してください。 data 属性は、ブートストラップがアンカーに自動配線されるのを防ぐために、アンカーに設定されています**。