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>

我不确定还有什么可以显示，因为脚本是表单引导程序，它将是巨大的。

P.S。如上所述，即使内容没有显示但通过相互点击，我仍然可以看到该类设置为活动，并且aria-expanded设置为true，无论我点击哪个选项卡。（另外，我想知道如果我找不到真正导致这个问题的原因，因为没有错误等等，我能编写一个新脚本并将脚本包含在bootstrap脚本下面吗？这应该覆盖并正常工作？）

编辑：我已经尝试添加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很多方法来查找当前元素或至少是a元素但是当我在console.log中我意识到当我点击方法时，console.log确实给出了{{1}的元素但是，当我第一次点击method时，pay的内容仍然是console.log元素，即使method已经添加了pay类。如果我再次点击active，我将最终得到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>

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

1 个答案: