Home/ Questions/Q 8619855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:26:28+00:00

I am using Twitter Bootstrap v2.1.1 and its tabbable feature. Problem: When any of

  • 0

I am using Twitter Bootstrap v2.1.1 and its tabbable feature.

Problem: When any of the tabs are clicked, the tab-pane does not change, although the state of the tab buttons .tab itself changes. In other words, the tab buttons appear depressed when you click on it, but the content that’s supposed to change with the tabs do not. A console.log() shows that the click event is being fired. Any ideas?

HTML

<!-- Tab Bar -->
<div class="tab-bar">
    <div class="tab active" id="photos" data-toggle="tab" data-target="#photos">
        <p>Photos</p>
    </div>
    <div class="tab" id="details" data-toggle="tab" data-target="#details"
        ><p>Details</p>
    </div>
</div>

<!-- Tab Panes -->
<div class="tab-content">
    <div id="photos" class="tab-pane">Photos</div>
    <div id="details" class="tab-pane">Details</div>
</div>

JS

$('.tab-bar').tab();
$('.tab-bar .tab').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
    console.log('show');
})

JS Includes

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Couple of problems and concerns:

    1. Your src for bootstrap-tab.js is directly linking to the Twitter Github page. I do not believe this is intended to be a CDN for Twitter Bootstrap. I believe this file is "eat your own dogfood", i.e. the Twitter Bootstrap Github page uses Twitter Bootstrap for its documentation and downloads.

      Since it is not intended as such, they could easily and at any time change the directory structure or version.

    2. You are using both bootstrap.min.js and bootstrap-tab.js. I believe that bootstrap.min.js includes bootstrap-tab.js and using both causes problems. See the following post: https://groups.google.com/forum/?fromgroups=#!topic/twitter-bootstrap/XH_ttp_9yXg

    3. I am also using twitter bootstrap 2.1.1. I did not find tab-bar in bootstrap.min.js, bootstrap-tab.js, bootstrap.css. Is it possible you are referencing 2.1.1 files and coding against an older version of Twitter Bootstrap?

    • 0