Question

174

Twitter Bootstrap Tab Selection Not Changing Content

rated 0 times [ 181] [ 7] / answers: 1 / hits: 18314 / 11 Years ago, thu, march 7, 2013, 12:00:00

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. I'm using the twitter bootstraps tab feature in order to display content, and while the script succeeds in changing the changing the active tab, the content remains the same.

Here's 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 the dependence files are loaded just fine when I run this (for reference, the version of bootstrap being used is 2.3.1). I've been head-desking about this problem for quite some time now, so any help would be greatly appreciated.

EDIT: Here's a jsfiddle link containing the error code.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tonisandyp

Add To Favorites

Follow

Total Points: 694

Total Questions: 97

Total Answers: 77

Location: British Indian Ocean Territory

Member since Tue, Feb 22, 2022

2 Years ago

answered 11 Years ago jaelyn · Accepted Answer

You need to move the Bootstrap script reference above your ready 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 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:

<script src=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');

    });

});

<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>