Twitter Bootstrap选项卡选择不更改内容

Question

Twitter Bootstrap选项卡选择不更改内容

7

虽然有很多Twitter Bootstrap的问题与我遇到的类似，但我还没有找到解决我特定问题的方法。我正在使用Twitter Bootstrap的“tab”功能来显示内容，虽然脚本成功地更改了活动选项卡，但内容仍然保持不变。

以下是代码：

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

当我运行这个程序时，所有依赖的文件都被正确加载（供参考，使用的bootstrap版本是2.3.1）。我已经为这个问题头痛了相当长的时间，任何帮助都将不胜感激。

编辑：这里是一个包含错误代码的jsfiddle链接：http://jsfiddle.net/C3gQb/2/。

- churay

3个回答

1

只需检查Bootstrap版本...应该是v2.3.1+

- Priya Choubey

1

我看到你在引用一个较旧的jQuery版本。能否升级到1.9.x？我认为他们不适用于较旧的jQuery版本。

另外，尝试这个：

<script type="text/javascript" src="public/js/bootstrap.min.js"></script>

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

另外，请将 bootstrap.min.js 放在函数之前。

- Praveen Kumar Purushothaman

我下载了jQuery v1.9.1，将其包含在页面中，并提升了 'bootstrap.min.js'的包含，但现在选项卡切换行为甚至不起作用（即现在选项卡本身和内容都没有更新）。也许我包含JQuery的方式不正确？如果我不应该本地加载它，我可以从哪个URL抓取它？注意：我小心地将JQuery的包含放置在bootstrap之上（将JQuery放在bootstrap之上），所以我认为这可能不是问题的原因。 - churay

太好了，你解决了。问题出在哪里？简单说一下？ - Praveen Kumar Purushothaman

3

问题并不在于 Bootstrap，而是我用于 HTML 标签的标识符（我在 ID 中使用了斜杠，但这是不允许的）。 - churay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tieson T. · Accepted Answer

您需要将Bootstrap脚本引用放在您的ready事件上方。因此，您页面底部应该如下所示：

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

另外，由于您指定了HTML5文档类型，因此在