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

时间：2013-03-07 03:15:02

标签： javascript html twitter-bootstrap

虽然有很多Twitter Bootstrap问题可以解决与我所遇到的类似问题，但我无法找到解决我特定问题的任何方法。我正在使用twitter bootstraps“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）。很长一段时间以来，我一直在讨论这个问题，所以任何帮助都会非常感激。

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

3 个答案:

答案 0 :(得分：7)

您需要移动Bootstrap脚本参考以上您的ready事件。因此，页面底部应如下所示：

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

正如您所看到的，您只需要绑定＆＃34;标签＆＃34;的点击事件，然后就可以了。这应该有效：

<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/ - 现在这两个工作了：

＆＃13;
＆＃13; 
$(function(){
    $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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。

答案 2 :(得分：1)

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

相关问题
最新问题