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>

Aleman

Also having this issue. The tabs switch in Bootstrap Studio but not in the browser. Did you find fix other than not using Tabs widget? – Yalta

Answer 1

I answered my own question.

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

Aleman

Answer 2

Here's how to get it working:

1. Add an id to the tabs <ul>, like so:

   <ul id="myTab" class="nav nav-tabs" role="tablist">

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

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

4. Reload your page and it should work now.

Julietjulieta

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. – Aleman

Well, in my case step 3 is what I needed. – Gardell

Answer 3

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.

Noctilucent

I do have JQuery loaded on the page in the header. – Aleman

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? – Noctilucent

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. – Aleman

Answer 4

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>

Ackler

Answer 5

This won't fix the original asker's problem as they're hand-coding Bootstrap CSS code 😂

For those using Bootstrap Studio, if you go into the Studio > Online widgets as pictured below, there are many generic tab-like widgets that could be used functionally in place of Tabs. At least one of these is bound to work, as some are coded differently than the stock Tabs widget:

---

I tried some out. Some are still broken. One that works (in Edge browser at least) is BS5 "Tabs Panel" by David Roublot. Here it is working in the browser:

Yalta