CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Nyxynyx
Nyxynyx

Reputation: 63619

Twitter Bootstrap Tabs not changing on click

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>

Upvotes: 3

Views: 7112

Answers (1)

Philip Tenn
Philip Tenn

Reputation: 6073

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?

Upvotes: 3

Related Questions