Bootstrap 3 Tabs Not Switching Active State Properly
Solution 1
I answered my own question.
I simply added .active to every single tab-pane, and set the overflow to hidden in the CSS.
Solution 2
Here's how to get it working:
Add an id to the tabs
<ul>
, like so:<ul id="myTab" class="nav nav-tabs" role="tablist">
Load jQuery and bootstrap js at the bottom of the page, before the
</body>
tag, like so:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Enable the tabs via javascript (be sure to add this below bootstrap js):
<script> $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) </script>
Reload your page and it should work now.
Sabolis
Updated on June 21, 2022Comments
-
Sabolis almost 2 years
I have this bit of code - just tabbed panels with separate graphs in each tabbed panel. When I switch tabs the content is not loading correctly. The active state of the panel is not changing when I click another tab, can you help a brotha figure this out?
<div class="col-sm-6"> <!-- Tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#DailyIncome" role="tab" data-toggle="tab">Daily Income</a></li> <li><a href="#YearlyIncome" role="tab" data-toggle="tab">Yearly Income</a></li> <li><a href="#Clients" role="tab" data-toggle="tab">Clients</a></li> <li><a href="#Orders" role="tab" data-toggle="tab">Orders</a></li> </ul> <!-- Content --> <div class="tab-content"> <div class="tab-pane fade in active" id="DailyIncome"> <div id="DailyIncomeChart" class="DailyIncomePanel"></div> </div> <div class="tab-pane fade" id="YearlyIncome"> <div id="YearlyIncomeChart" class="YearlyIncomePanel"></div> </div> <div class="tab-pane fade" id="Clients"></div> <div class="tab-pane fade" id="Orders"></div> </div> </div>