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>

根据 Docs，您需要在标题中的每个链接上放置一个ID，该链接需要在li中，不应该有其他样式，即不需要li中的所有数据目标。您的列表没有数据切换或ID。

你的HTML将是这样的

<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">...</div>
   <div class="tab-pane" id="b">...</div>
   <div class="tab-pane" id="c">...</div>
   <div class="tab-pane" id="d">...</div>
</div>

根据文档，您不应该需要任何Javascript