Twitter Bootstrap Tab Selection Not Changing Content

Although there are plenty of Twitter Bootstrap questions open that regard similar issues to that which I'm having, I haven't been able to find any solutions to my particular issue.

Solution 1:

You need to move the Bootstrap script reference above your ready event. So, the bottom of your page should look like this:

<scriptsrc="public/js/bootstrap.min.js"></script><script>jQuery(document).ready(function ($) {
    $('.nav-tabs').tab();
});
</script>

Also, since you specified an HTML5 doctype, the type attribute is optional in the script tag.

EDIT 2:

I'm fairly certain you can get rid of the manual tab binding - I don't use it on my site, and this jsFiddle doesn't do it either: http://jsfiddle.net/C3gQb/

As you can see, you just need to bind the click events of your "tabs", and then it will work. This should work:

<scriptsrc="public/js/bootstrap.min.js"></script><script>
$(function(){ 
    $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });  
});
</script>

If it doesn't, I suspect there is something unusual about your browser/dev environment that isn't obvious from what you've posted.

EDIT 4

Yeah, we've isolated the problem with your new jsFiddle. I tweaked the top 2 for this version: http://jsfiddle.net/C3gQb/4/ - and those two now work:

$(function(){
    $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});

<linkhref="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script><h3>Version Information:</h3><divclass="tabbable tabs-left"><ulclass="nav nav-tabs"data-tabs="tabs"><liclass="active"><ahref="#project-src-Graph-Graph-pm__0"data-toggle="tab">9424</a></li><li><ahref="#project-src-Graph-Graph-pm__1"data-toggle="tab">9058</a></li><li><ahref="#project/src/Graph/Graph.pm__2"data-toggle="tab">8928</a></li><li><ahref="#project/src/Graph/Graph.pm__3"data-toggle="tab">8926</a></li><li><ahref="#project/src/Graph/Graph.pm__4"data-toggle="tab">8924</a></li><li><ahref="#project/src/Graph/Graph.pm__5"data-toggle="tab">8890</a></li><li><ahref="#project/src/Graph/Graph.pm__6"data-toggle="tab">8889</a></li><li><ahref="#project/src/Graph/Graph.pm__7"data-toggle="tab">8887</a></li></ul><divclass="tab-content"><divclass="tab-pane active"id="project-src-Graph-Graph-pm__0"><p>
        Author: joe<br>
        Version: v9424 (1:31 pm February 28, 2013)<br>
        Action: Modified<br>
        Message: Finalized a bit of the code... should be better now.<br></p></div><divclass="tab-pane"id="project-src-Graph-Graph-pm__1"><p>
        Author: joe<br>
        Version: v9058 (9:13 pm February 26, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br></p></div><divclass="tab-pane"id="project/src/Graph/Graph.pm__2"><p>
        Author: joe<br>
        Version: v8928 (2:08 am February 25, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br></p></div><divclass="tab-pane"id="project/src/Graph/Graph.pm__3"><p>
        Author: joe<br>
        Version: v8926 (1:14 am February 25, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br></p></div><divclass="tab-pane"id="project/src/Graph/Graph.pm__4"><p>
        Author: joe<br>
        Version: v8924 (10:26 pm February 24, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br></p></div><divclass="tab-pane"id="project/src/Graph/Graph.pm__5"><p>
        Author: joe<br>
        Version: v8890 (9:59 pm February 23, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br></p></div><divclass="tab-pane"id="project/src/Graph/Graph.pm__6"><p>
        Author: joe<br>
        Version: v8889 (9:53 pm February 23, 2013)<br>
        Action: Added<br>
        Message: Hello, world!<br></p></div><divclass="tab-pane"id="project/src/Graph/Graph.pm__7"><p>
        Author: joe<br>
        Version: v8887 (9:40 pm February 23, 2013)<br>
        Action: Added<br>
        Message: Hello, world!<br></p></div></div></div>

Solution 2:

I can see that you are referencing an older version of jQuery. Can you upgrade it to 1.9.x? I don't think they are working with an older version of jQuery.

Also, try this:

<scripttype="text/javascript"src="public/js/bootstrap.min.js"></script><scripttype="text/javascript">
$(document).ready(function () {
    $('.nav-tabs').tab();
});
</script>

And also, please move the bootstrap.min.js before the function.

Solution 3:

Just check the bootstrap version... it should be v2.3.1 +