First nav pills content didn't show up in Bootstrap

Question

I have pilss that have like 4 tabs. when I first reload, the first tab didn't show the content, but if I go to other tab and back to the first tab, the content just show up. How to fix this guys?

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');
});

Answer 1

将活动类添加到第一个选项卡

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