Geek Answers Handbook

Twitter Boot Buffer Selection Tab Does Not Change Content

Despite the fact that there are many questions about downloading a Twitter bootstrap that relate to similar problems that I am having, I could not find a solution for my specific problem. I use the twitter bootstraps tab function to display the content, and while the script manages to change the change to the active tab, the content remains the same.

Here is the code:

<!DOCTYPE html> <html lang="en"> <head> <title>Hello, Tabs!</title> <link rel="stylesheet" href="public/css/bootstrap.min.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script type="text/javascript" src="public/js/bootstrap.min.js"></script> </head> <body> <h3>Version Information:</h3> <div class="tabbable tabs-left"> <ul class="nav nav-tabs" data-tabs="tabs"> <li class="active"> <a href="#project/src/Graph/Graph.pm__0" data-toggle="tab">9424</a> </li> <li> <a href="#project/src/Graph/Graph.pm__1" data-toggle="tab">9058</a> </li> <li> <a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a> </li> <li> <a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a> </li> <li> <a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a> </li> <li> <a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a> </li> <li> <a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a> </li> <li> <a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a> </li> </ul> <div class="tab-content"> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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> <script type="text/javascript"> jQuery(document).ready(function ($) { $('.nav-tabs').tab(); }); </script> </body> </html>

All dependency files load just fine when I run this (for reference, the bootstrap version used is 2.3.1). I’ve been shaking hands on this issue for a long time, so any help would be greatly appreciated.

EDIT: Here is the jsfiddle link containing the error code.

+7
source share
3 answers

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

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

Also, since you specified the type of the HTML5 document, the type attribute is optional in the script tag.

EDIT 2 :

I am absolutely sure that you can get rid of the language binding manually - I do not use it on my site, and this jsFiddle does not do this 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:

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

If this is not the case, I suspect there is something unusual in your / dev browser environment that is not obvious from what you posted.

EDIT 4

Yes, we have isolated the problem from your new jsFiddle. I changed the top 2 for this version: http://jsfiddle.net/C3gQb/4/ - and these two now work:

 $(function(){ $('.nav-tabs a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); }); }); 
 <link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <h3>Version Information:</h3> <div class="tabbable tabs-left"> <ul class="nav nav-tabs" data-tabs="tabs"> <li class="active"> <a href="#project-src-Graph-Graph-pm__0" data-toggle="tab">9424</a> </li> <li> <a href="#project-src-Graph-Graph-pm__1" data-toggle="tab">9058</a> </li> <li> <a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a> </li> <li> <a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a> </li> <li> <a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a> </li> <li> <a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a> </li> <li> <a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a> </li> <li> <a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a> </li> </ul> <div class="tab-content"> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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> <div class="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>
+7
source

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

Also try the following:

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

Also, please move bootstrap.min.js before the function.

+1
source

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

+1
source

More articles:


All Articles