Twitter bootstrap 3 引导3个选项卡工作不正常

我差点从他们的网站上复制了代码。选项卡完全启动，当我单击选项卡时，新面板被激活。但是，“活动”类不应用于已激活的选项卡。 代码如下：

<ul class="nav nav-tabs">
 <li data-toggle="tab"  data-target="#a" class="active"><a href="#">a</a></li>
  <li data-toggle="tab"  data-target="#b" ><a href="#">b</a></li>
  <li data-toggle="tab"  data-target="#c"  ><a href="#">c</a></li>
</ul>

 <div class="tab-content">
  <div class="tab-pane fade in active" id="a"> in tab a </div>
  <div class="tab-pane fade" id="b">in tab b</div>
  <div class="tab-pane fade" id="c">in tab c</div>
</div>

在表a中
在表b中
在表c中

根据，您需要在标题中的每个链接上放置一个

id

，该链接需要位于

li

中，该li不应具有其他样式，即不需要

li

中的所有

数据目标。您的列表没有
数据切换
或
id

你的HTML是这样的









AAA
BBB
CCC
DDD
确保在引导js文件之前插入jquery：

<script src="jquery.min.js" type="text/javascript"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>


我的问题是第一个选项卡内的额外的
标记。
在我的情况下，我有两个元素具有相同的
id
。我很长时间没有注意到问题的原因，因为第一个这样的元素是隐藏的。
我的问题是我愚蠢地认为引导文档是最新的。

如果使用的是引导程序4，则必要的工作选项卡markub为：





A.
B
这将起作用

$(".nav-tabs a").click(function(){
     $(this).tab('show');
 });

要检查此问题的另一件事是html标记属性id。您应该检查该页面中与导航选项卡id具有相同id的任何其他html标记。
出于某种奇怪的原因，引导选项卡在我使用href之前不适用于我，比如：-

<li class="nav-item"><a class="nav-link" href="#a" data-toggle="tab">First</a></li>



但当我用数据目标替换href时，它就开始工作了，比如：-

<li class="nav-item"><a class="nav-link" data-target="#a" data-toggle="tab">First</a></li>

首先
当我删除平滑滚动脚本（）时，它工作了。
当我将以下行从头部部分移动到身体部分的末端时，它工作了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在我的例子中（动态生成部分）：问题是href=“#…”中缺少“#”一个“#”
对于使用bootstrap3解决此问题的任何人，请使用下面的类列表。如果您是从中粘贴副本，它肯定不会起作用。由于新版本中的.show

<div class="tab-pane fade in active" >

<div class="tab-pane fade in" >


将此用于您的代码

<ul class="nav nav-tabs" style="margin-top:10em;">
  <li class="active" data-toggle="tab"><a href="#">Assign</a></li>
<li data-toggle="tab"><a href="#">Two</a></li>
<li data-toggle="tab"><a href="#">Three</a></li>





在我的例子中，我们将div id设置为一个数字，并设置href=“#123”，这不起作用。。将前缀添加到id会有所帮助

例如：
这不起作用-

<li> <a data-toggle="tab" href="#@i"> <li/>
...
<div class="tab-pane" id="#@i">


...

这起到了作用：

<li><a data-toggle="tab" href="#prefix@i"><li/>
...
<div class="tab-pane" id="#prefix@i">


...
此解决方案解决了我的问题。jquery.js需要在bootstrap.js文件之前插入。是的，这是为我工作的签入这里，我必须添加链接，因为对于我的情况，它不会进入相应的页面，它只是启用活动的，因为lii将脚本标记移动到index.html/主加载html，而不是组件html，并且它工作正常删除脂肪有帮助，我删除了引导页面上显示的
aria控件
，
aria选择的
等属性。设置这里使用的最小值，它就起作用了。这个代码段会一直起作用，直到您删除引导JS。所以“根据文档，你不应该需要任何Javascript”的说法要么是错误的，要么需要一些严肃的解释。我也有同样的问题！！！在两个元素的名称相同的情况下，花这么多时间试图调试某些东西，真令人沮丧。谢谢Tsutomu，你也帮我找到了我的问题所在+1这是对使用Angular和React等组件框架时出现的常见问题的修复。跨多个组件的类似命名约定很容易丢失。谢谢嘿@EZE你能详细解释一下为什么你发布的代码会有效吗？
<li><a data-toggle="tab" href="#prefix@i"><li/>
...
<div class="tab-pane" id="#prefix@i">