twitter-bootstrap-3 – 引导3选项卡无法正常工作

前端之家收集整理的这篇文章主要介绍了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

猜你在找的Bootstrap相关文章