Question

我几乎从他们的网站上复制了代码。选项卡完美启动，当我单击选项卡时，将激活新面板。但是，“活动”类不会应用于激活的选项卡。这是代码：

<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>

Answer 1

根据Docs，您需要在标题中的每个链接上放置id，并且该链接需要位于li内，该data-target应该没有其他样式，即不会我需要li中的所有data-toggle内容。您的列表没有id或<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> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-tabs"> <li><a href="#a" data-toggle="tab">a</a></li> <li><a href="#b" data-toggle="tab">b</a></li> <li><a href="#c" data-toggle="tab">c</a></li> <li><a href="#d" data-toggle="tab">d</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a">AAA</div> <div class="tab-pane" id="b">BBB</div> <div class="tab-pane" id="c">CCC</div> <div class="tab-pane" id="d">DDD</div> </div>。

您的HTML就像这样

{{1}}

根据文档

，你不应该需要任何Javascript

Answer 2

确保在引导程序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>

Answer 3

就我而言，我有两个具有相同id的元素。我很长时间没有注意到问题的原因，因为第一个这样的元素被隐藏了。

Answer 4

我的问题是第一个标签中的额外 </div>标记。

Answer 5

我的问题是我狡猾地总结了自助文件是最新的文件如果您使用 Bootstrap 4 ，则必要的工作标签markub为：http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior

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

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

Answer 6

这将有效

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

Answer 7

由于一些奇怪的原因，在我使用href之前，bootstrap标签对我不起作用： -

<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>

Answer 8

当我删除平滑滚动脚本（https://github.com/cferdinandi/smooth-scroll）时，它起作用了。

Answer 9

当我将以下几行从头部移动到主体部分的末尾时，它起作用了。

<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>

Answer 10

要检查此问题还有一件事是html标记属性 id 。您应该检查该页面中的任何其他html标记与导航标签ID具有相同的ID。

Answer 11

就我而言（动态生成部分）：问题是href =“＃...”中缺少“＃”。

Answer 12

对于使用bootstrap3解决此问题的任何人，请使用下面的类列表。如果您已复制从DOC粘贴的内容，则肯定无法正常工作。由于出现了新版本的.show。

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

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

Answer 13

使用此代码作为代码

<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>

Answer 14

在我的情况下，我们将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">

bootstrap 3选项卡无法正常工作

14 个答案: