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

【问题标题】：Twitter Bootstrap Tab Selection Not Changing ContentTwitter Bootstrap 选项卡选择不更改内容
【发布时间】：2013-03-07 03:15:02
【问题描述】：

尽管有很多 Twitter Bootstrap 问题与我遇到的类似问题有关，但我无法找到任何解决我的特定问题的方法。我正在使用 twitter 引导程序“选项卡”功能来显示内容，虽然脚本成功更改了正在更改的活动选项卡，但内容保持不变。

代码如下：

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

当我运行它时，所有的依赖文件都加载得很好（作为参考，正在使用的引导程序版本是 2.3.1）。很长一段时间以来，我一直在负责这个问题，所以任何帮助都将不胜感激。

编辑：Here's 包含错误代码的 jsfiddle 链接。

【问题讨论】：

标签： javascript html twitter-bootstrap

【解决方案1】：

您需要将 Bootstrap 脚本引用移动到上方您的就绪事件。所以，你的页面底部应该是这样的：

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

此外，由于您指定了 HTML5 文档类型，type 属性在 script 标记中是可选的。

编辑 2：

我相当肯定你可以摆脱手动选项卡绑定 - 我不在我的网站上使用它，这个 jsFiddle 也不这样做：http://jsfiddle.net/C3gQb/

如您所见，您只需要绑定“标签”的点击事件，然后它就会起作用。这应该有效：

<script src="public/js/bootstrap.min.js"></script>
<script>
$(function(){ 
    $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });  
});
</script>

如果没有，我怀疑您的浏览器/开发环境有一些不寻常的地方，这在您发布的内容中并不明显。

编辑 4

是的，我们已经用您的新 jsFiddle 隔离了问题。我调整了这个版本的前 2 个：http://jsfiddle.net/C3gQb/4/ - 现在这两个可以工作了：

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

【讨论】：

我尝试将脚本引用放在多个地方，但无济于事。如果我将包含放在您列出的位置，则会产生相同的行为。
@AverageJoe 脚本引用肯定需要在 ready 事件之上。你有安装 Firebug 吗？
是的，我一直在使用 Firebug 来隔离问题。据我所知，主要问题是更新只发生在点击选项卡而不是内容窗格时。
另外，我尝试将脚本代码更改为您所描述的内容，但遇到了同样的问题。
我用更能代表我的实际代码的东西替换了 jsfiddle 中的代码。我已将链接放在更新后的开篇文章中。

【解决方案2】：

我可以看到您引用的是旧版本的 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移到函数前。

【讨论】：

我下载了 jquery v1.9.1，将其包含在页面上，并提升了“bootstrap.min.js”的包含，但现在选项卡切换行为甚至不起作用（即现在既标签本身也不更新内容）。也许我打算错误地包含 JQuery？如果我不应该在本地加载它，我可以从哪个 URL 获取它？注意：我很小心地将 JQuery 包含放在引导包含之上（将 JQuery 放在引导之上），所以我认为这不是问题。
太好了，你已经解决了。问题是什么？说成一行？
问题不在于引导程序，而在于我用于 HTML 标签的标识符（当不允许使用斜杠时，我在 ID 中使用斜杠）。

【解决方案3】：

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

【讨论】：