第一个导航丸内容没有出现在Bootstrap中

时间:2016-05-21 10:16:37

标签: jquery css twitter-bootstrap

我有4个标签。 当我第一次重新加载时,第一个选项卡没有显示内容,但是如果我转到其他选项卡并返回第一个选项卡,则内容就会显示出来。 怎么解决这个家伙?

https://jsfiddle.net/qfmbLyo8/

<div class="col-lg-3 col-sm-3 col-md-3">
   <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#standar_Spesifikasi" role="tab" data-toggle="tab">Standar Spesifikasi</a></li>
      <li><a href="#spesifikasi_Produk" role="tab" data-toggle="tab">Spesifikasi Produk</a></li>
      <li><a href="#spesifikasi_material" role="tab" data-toggle="tab">Spesifikasi Material</a></li>
      <li><a href="#kapasitas_Produk" role="tab" data-toggle="tab" >Kapasitas Produk</a></li>
   </ul>
</div>
<div class="col-lg-8 col-lg-offset-1 col-sm-9 col-md-9">
   <div class="tab-content">
      <div class="tab-pane" id="standar_Spesifikasi">
         1
      </div>
      <div class="tab-pane" id="spesifikasi_Produk">
         2
      </div>
      <div class="tab-pane" id="spesifikasi_material">
         3
      </div>
      <div class="tab-pane" id="kapasitas_Produk">
         4
      </div>
   </div>
</div>

$("ul.nav-pills a").click(function (e) {
   e.preventDefault();  
   $(this).tab('show');
});

1 个答案:

答案 0 :(得分:1)

将活动类添加到第一个标签

<div class="tab-pane active" id="standar_Spesifikasi">