ブートストラップ3 jqueryのイベント

Question

私の目標は、ブートストラップのnavポールクリックイベントをオーバーロードすることであり、私はコードそれが薬のために動作させるために、次のように変更しましたthis post

渡って来て幸せでした、それがうまくいかない理由を理解するのは無力です。

HTML：

<ul class="nav nav-pills" id="orders_tab"> 
       <li class="active"><a data-toggle="pill" href="#orders_for_today">Текущие</a></li> 
       <li><a data-toggle="pill" href="#orders_sent_to_vendors">Ожидающие</a></li> 
       <li><a data-toggle="pill" href="#inventories">Остатки</a></li> 
       <li><a data-toggle="pill" href="#sales">Продажи</a></li> 
       <li><a data-toggle="pill" href="#sales_aggregate">Аггрегированные продажи</a></li> 
       <li role="presentation" class="dropdown"> 
        <a class="dropdown-toggle" data-toggle = "dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
         Прочее <span class="caret"></span> 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#orders_products">Продукты</a></li> 
        </ul> 
       </li> 
      </ul> 

JS

$('a[data-toggle="pill"]').on('shown.bs.pill', function (e) { 
     var target = $(e.target).attr("href") // activated tab 
     alert(target); 
    }); 

Answer 1

Bootstrap nav-pills akaはjsコンポーネントではないスタイリングコンポーネントです。したがって、データトグルはdata-toggle="tab"になります。あなたのコードだけFiddle

data-toggle="tab" 

ため

更新フィドルが必要な変化します。

-help :)

Answer 2

ブートストラップの丸薬およびタブ同じJavaScriptを使用しています。 .nav-tabsの代わりにちょうど.nav-pillsが異なります。

data-toggle="pill"をどこでもdata-toggle="tab"に置き換えて動作させる必要があります。