Bootstrap 3 Tabs Not Switching Active State Properly

Question

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>

mariordev · Answer 1 · 2014-10-01T04:45:53.440

8

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.

edited Oct 01 '14 at 04:45

answered Oct 01 '14 at 04:37

mariordev

101
5

8

Believe me, if it was as easy as copying what the bootstrap website says for it to work I wouldn't be here. This does not work, I have tried it. – Sabolis Oct 01 '14 at 18:57
1

Well, in my case step 3 is what I needed. – Eduardo Conte Apr 14 '20 at 18:42

score 0 · Answer 2 · answered Oct 01 '14 at 02:22

0

Did you maybe forget to include jQuery on the page? When I first made this codepen:

http://codepen.io/anon/pen/tGhHk

I forget to include the:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

and of course the tabs (which are Javascript driven in Bootstrap) didn't work but when I remembered, all was good again.

answered Oct 01 '14 at 02:22

I do have JQuery loaded on the page in the header. – Sabolis Oct 01 '14 at 02:23
Hmmm. Well what are you trying to get to happen in those tabs exactly? They appear to be working as expected (at least in CodePen) as you wrote them. Are you trying to trigger add'l behavior? – Oct 01 '14 at 02:57
I have graphs that are within them. When I switch tabs over the "active" class does not get applied to the other tabs and the graphs within do not display properly. – Sabolis Oct 01 '14 at 03:01

score 0 · Answer 3 · answered Dec 06 '21 at 05:43

In case someone from todays age sees this, with the new version of bootstrap be sure to include the following 3 scripts AT THE END OF YOUR BODY TAG. This is for Bootstrap 4.1

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

score -1 · Accepted Answer · answered Oct 01 '14 at 18:58

-1

I answered my own question.

I simply added .active to every single tab-pane, and set the overflow to hidden in the CSS.

answered Oct 01 '14 at 18:58

Sabolis

327
1
3
13

Bootstrap 3 Tabs Not Switching Active State Properly

4 Answers4