自举切换标签已无法正常工作

Question

我目前正在帮助解决切换问题，但控制台中没有显示错误，我不知道从哪里开始寻找。 有两个可以在彼此之间切换的选项卡。假设切换标签是支付/方法。默认页面显示工资和方法选项卡被点击时，方法选项卡显示完美，但再次点击支付时，选项卡（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，所以我可以选择当前元素，但不知何故它只工作了一下。 我添加了另一个类到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> 

我有这样的脚本

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

我试过很多console.log方式找到当前元素或至少一个元素，但是当我我CONSOLE.LOG实现当我点击方法时，console.log确实给出了method的元素，但是当我第一次点击pay时，我从console.log得到的仍然是method元素，即使pay已经有active class adde 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>