CODEWITHSUNDEEP
twitter-bootstrap
Seven Deadly Sins
Seven Deadly Sins

Reputation: 720

Twitter Bootstrap - Tabs not functional even when using working example

I'm trying to get Bootstrap working with tabs, but for some reason, no matter what I try, they simply don't work. They appear correctly, but when clicking on the links the tabs don't change. The confusing bit is that I'm not even using my code any more- I'm copy-pasting in code that supposedly belongs to "working examples" that have been submitted as answers to other questions.

Here's the most recent code that I'm using. It worked perfectly in the fiddle it was submitted in as an answer to another question, and works fine pretty much anywhere except where I'm trying to test it. I've opened the file as straight HTML, had it served by the Django runtime server, and had it served by an Apache server, and nothing seems to be working.

http://jsfiddle.net/ivobos/fuBK6/

<html>
    <head>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
        <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
        <title>TabTest</title>
    </head>
    <body>
        <div class="tabbable">
           <ul class="nav nav-tabs">
             <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
             <li><a href="#tab2" data-toggle="tab">tab2</a></li>
           </ul>
           <div class="tab-content">
               <div id="tab1" class="tab-pane active">tab1 content</div>
               <div id="tab2" class="tab-pane">tab2 content</div>
           </div>
        </div>
    </body>
</html>

Upvotes: 2

Views: 6121

Answers (1)

Jason Towne
Jason Towne

Reputation: 8050

Try moving your jquery-1.7.1.js script above your bootstrap-tabs.js script.

<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
    <title>TabTest</title>
</head>

Upvotes: 7

Related Questions