vandi vandi - 6 months ago 17
CSS Question

First nav pills content didn't show up in Bootstrap

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

add active class to first tab

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