Question

我正在尝试让Bootstrap使用标签，但出于某种原因，无论我尝试什么，它们都无法正常工作。它们显示正确，但单击链接时标签不会更改。令人困惑的是，我甚至不再使用我的代码 - 我在代码中复制粘贴，这些代码应该属于作为其他问题的答案而提交的“工作示例”。

这是我正在使用的最新代码。作为对另一个问题的回答，它在提交的小提琴中完美地工作，并且除了我试图测试它之外的任何地方都可以正常工作。我已经将文件打开为直接HTML，由Django运行时服务器提供服务，并由Apache服务器提供服务，似乎没有任何工作。

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>

Answer 1

尝试将jquery-1.7.1.js脚本移到bootstrap-tabs.js脚本上方。

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

Twitter Bootstrap - 即使使用工作示例，选项卡也不起作用

1 个答案: