Zakładka Bootstrap - klasa aktywna nie działa przy ładowaniu stron

Question

Mój kod znajduje się poniżej. Zauważ, że zakładka "one" jest aktywna. Ale problem polega na tym, kiedy otwieram stronę, karta naprawdę pokazuje się aktywnie, ALE zawartość karty nie jest wyświetlana; wyświetla się tylko wtedy, gdy ręcznie kliknę kartę. Jak to naprawić?

<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"> 

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

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

</div> 

Answer 1

Add Class active również od wybranej zawartości zakładki

<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> 

Wystarczy popatrzeć na to: Fiddle

Answer 2

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

zmienić na

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

Answer 3

Wygląda na to, że połączenie "zanikania" z "aktywną" klasą na zawartości karty wydaje się być sprzeczne z moim szczególnym użyciem paneli zakładek. Nadal nie załadował treści podczas ładowania strony początkowej.

Kiedy usunąłem "zanik", wszystko zaczęło działać.

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