Javascript 引导切换选项卡无法正常工作

我目前正在帮助解决切换问题，但在控制台中并没有显示错误，我不知道从哪里开始查找。 有两个选项卡可以在彼此之间切换。假设切换选项卡是pay/method。默认页面显示pay，当单击method选项卡时，method选项卡显示得非常完美，但当再次单击pay时，选项卡（CSS）工作正常，我们可以看到pay选项卡处于活动状态，但pay的内容不显示。内容仍然是方法

目前正在使用引导，当然脚本已经包含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>

我尝试了

console.log

很多方法来查找当前元素或至少是a元素，但当我使用console.log时，我在单击method时意识到，

console.log

确实提供了

method

的元素，但是当我第一次单击

pay

时，我从

控制台获得的内容。log

仍然是

方法

元素，即使

pay

已经添加了

活动的
类。如果我再次单击
pay
，那么我将最终获得
pay
元素。我可能知道原因，但我不知道如何解决这个问题

谁能帮我一下吗？
提前感谢。
确保包含运行代码所需的脚本。查看正在运行的演示

基本上，你只需要调用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>



付款
方法

这是一个付款区
这是一种方法。
是的，我确实包含了那些脚本，我很好奇为什么它不能正常工作。当我单击“方法”时，默认为“付款”，内容会完全更改为“方法”，但当我再次单击“付款”时，li会正确添加/删除类，但内容仍在“方法内容”中，不会更改为“付款”区域。选项卡是否在不添加自定义jquery的情况下运行？也可以检查脚本的位置。jquery链接应该位于所有js scripts.omg的顶部，它实际上是
数据目标
，但是为什么从付款到方法的第一次标签会起作用呢？不会是另一种方式，也许这与您的自定义脚本有关。再次感谢！天哪，这件事太简单了，我花了太多时间想办法，也尝试了其他方法，但那只是眼尖的问题。
<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>