CODEWITHSUNDEEP
htmltwitter-bootstrap-3bootstrap-tabs
Sabolis
Sabolis

Reputation: 347

Bootstrap 3 Tabs Not Switching Active State Properly

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>

Upvotes: 9

Views: 13771

Answers (5)

Daniel Donnelly
Daniel Donnelly

Reputation: 620

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:

enter image description here

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:

enter image description here

Upvotes: 0

Wizard
Wizard

Reputation: 513

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>

Upvotes: 0

Sabolis
Sabolis

Reputation: 347

I answered my own question.

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

Upvotes: -1

mariordev
mariordev

Reputation: 109

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.

Upvotes: 8

user718147
user718147

Reputation:

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.

Upvotes: 0

Related Questions