ブートストラップトグルタブが正常に動作しない

Question

現在、トグルの問題を解決するのに役立っていますが、コンソールにエラーが表示されず、どこから探し始めるべきか分かりません。 相互に切り替えることができる2つのタブがあります。トグルタブが有料/方法であるとします。デフォルトのページにお支払いが表示されていますが、方法タブがクリックされた場合、方法タブは完全に表示されますが、支払いを再度クリックすると、タブ（CSS）が正常に機能しました。内容はまだ方法です。

現在、ブートストラップを使用していますが、もちろんスクリプトにはすでにjqueryが含まれています。

htmlコードは、私がスクリプトは、フォームのブートストラップであることから、それは巨大なだろう表示他に何かわからない

<ul class="nav nav-tabs" role="tablist"> 
<li class="active" role="presentation"> 
<a data-toggle="tab" role="tab" aria-controls="home" href="#home" aria-expanded="true">Pay</a> 
<li class="" role="presentation"> 
<a data-toggle="tab" role="tab" aria-controls="method" href="#method" aria-expanded="false">method</a> 
</ul> 

です。

P.S.つまり、コンテンツは表示されませんが、お互いをクリックしても、クラスがアクティブに設定されていることがわかり、クリックしたタブにaria-expandedがtrueに設定されていることがわかります。 （また、エラーがないなどの理由で実際に何が起こっているのかわからない場合は、新しいスクリプトを作成してブートストラップスクリプトの下にスクリプトを含めることができますか？ ？）

編集： jqueryを追加しようとしましたが、現在の要素を選択できますが、どういうわけかそれはちょっとだけ働いていました。 私は、現在の要素または少なくとも要素を見つけるためconsole.logたくさんの方法を試してみましたが、私は私をCONSOLE.LOGとき、私はこの

$("ul.nav.nav-tabs").on('click', $(".payment-tabs.active"), function() { 
    console.log($(".payment-tabs.active")); 
}); 

ようなスクリプトを持っているHTML

<ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active payment-tabs"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-id="payment">pay</a></li> 
    <li role="presentation" class="payment-tabs"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" data-id="profile">method</a></li> 
    </ul> 

に別のクラスを追加しました私がメソッドをクリックすると実現したconsole.logはmethodの要素を返しますが、payを初めてクリックしたときには、payが既にactiveのクラスadodeを持っていても、console.logから得たものはまだmethodですd。 payを再度クリックすると、最後にpay要素が取得されます。理由の考えがあるかもしれませんが、私はこれをどのように解決できるか分かりません。

誰かが私に手を差し伸べてもらえますか？ ありがとうございます。

Answer 1

コードを実行するために必要なスクリプトが含まれていることを確認してください。実行中のデモをご覧ください。here

基本的には、3つの主要ソースを呼び出すだけです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

タブ

<div class="container">  
    <ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a data-target="#payment" data-toggle="tab">Payment</a></li> 
    <li><a data-target="#method" data-toggle="tab">Method</a></li> 
    </ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="payment">This is a payment area</div> 
    <div class="tab-pane" id="method">This is a method.</div> 
</div> 
</div>