bootstrap 3选项卡无法正常工作

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

根据文档你需要id在标题中的每个链接上放置一个链接需要在li其中应该没有其他样式,即不需要所有的data-target东西li.你的清单没有data-toggle或id.

你的HTML就是这样的

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

根据文档,你不应该需要任何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

我的问题是我愚蠢地认为引导程序文档是最新的。
如果您使用的是Bootstrap 4，则必要的工作标签标记是：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 5

这将工作

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