bootstrap 切换选项卡无法正常工作

Question

我目前正在帮助解决切换问题，但控制台中没有显示任何错误，我不知道从哪里开始寻找。有两个选项卡可以在彼此之间切换。假设切换选项卡是付费/方法。默认页面显示付款，当单击方法选项卡时，方法选项卡显示完美，但当再次单击付款时，选项卡 (CSS) 工作正常，我们可以看到付款选项卡处于活动状态，但付款内容不显示。内容还是方法

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

我不确定还要显示什么，因为脚本是 bootstrap 形式的，它会很大。

P.S。如前所述，即使内容没有显示，但通过相互点击，我仍然可以看到 class 设置为 active 并且 aria-expanded 设置为 true 到我点击的任何选项卡。（此外，我想知道我是否无法找出真正导致此问题的原因，因为没有错误等等，我是否可以编写一个新脚本并将该脚本包含在 bootstrap 脚本下方？那应该覆盖并正常工作？）

编辑：我试过添加 jquery ，所以我可以 select 当前元素，但不知何故它只起作用了一点。我在 html

中添加了另一个 class

  <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 很多方法来查找当前元素或至少是 a 元素但是当我 console.log 我意识到当我点击方法时， console.log 确实给出了元素method 但是当我第一次点击 pay 时，我从 console.log 得到的仍然是 method 元素，尽管 pay 已经有 active class 添加。如果我再次单击 pay，那么我最终将获得 pay 元素。我可能知道原因，但我不知道如何解决这个问题。

有人可以帮帮我吗？提前致谢。

Answer 1

确保包含运行代码所需的脚本。请参阅运行ning 演示 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>

bootstrap 切换选项卡无法正常工作

bootstrap toggle tab has does not work properly

html

javascript

jquery

toggle

twitter-bootstrap