Bootstrap tab - active class not working on page loading

Question

My code is below. Notice the tab \'one\' is active. But the problem is when i open the page, the tab really shows active, BUT the tab content does not show ; it only shows w

Answer 1

Add class active also on the selected tab content

<ul class="nav nav-tabs">
  <li class="nav active"><a data-toggle="tab" href="#one">One</a></li>
  <li class="nav"><a data-toggle="tab" href="#two">Two</a></li>
</ul>

<div class="tab-content">

  <!-- Show this tab by adding `active` class -->
  <div class="tab-pane fade in active" id="one">
    <p>Tab one content</p>
  </div>

  <!-- I removed `in` class here so it will have a fade in effect when showed -->
  <div class="tab-pane fade" id="two">
    <p>Tab two content</p>
  </div>

</div>

Have a look at this: Fiddle

Answer 2

It seems that having a combination of "fade" with the "active" class on the tab content seems to be conflicting on my particular usage of the tab panels. It still didn't load the content on the initial page load.

Once I removed "fade" then things seemed to work.

<div class="tab-pane active" id="sales" role="tabpanel">

Answer 3

Sometimes when you try getting the values from the backend, there is some possibility that it can still not work. Try adding show right next to active:

<div class="tab-pane fade in active show" id="one">

Answer 4

I had the same problem but using navpills.

None of the other solutions worked for me. Finally I solved it using jquery:

$(document).ready(function () 
{
    // somehow first navpill will not look active on page load (although it is...)
    $('.navpill.active').trigger('click');
});

I guess it would work the same for navtabs, only use $('.nav.active') to locate the correct element.

Answer 5

The only way that worked for me was with JS. Put on the first item:

<li class="nav-item active"><a class="nav-link active" ....

And this code:

$(".nav-tabs li a").click(function(){
  $(".nav-tabs li a").removeClass("active");
  $(this).addClass("active");
});

Answer 6

<div class="tab-pane fade in" id="one"> <p>Tab one content</p> </div> 

Change this to

<div class="tab-pane active in" id="one"> <p>Tab one content</p> </div>