2

我正在尝试让 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>
4

1 回答 1

7

尝试将脚本移到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>
于 2012-12-28T20:28:13.463 回答