twitter-bootstrap Twitter Bootstrap 选项卡选择不改变内容

Question

提问by churay

Although there are plenty of Twitter Bootstrap questions open that regard similar issues to that which I'm having, I haven't been able to find any solutions to my particular issue. I'm using the twitter bootstraps "tab" feature in order to display content, and while the script succeeds in changing the changing the active tab, the content remains the same.

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

Here's the code:

这是代码：

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

All the dependence files are loaded just fine when I run this (for reference, the version of bootstrap being used is 2.3.1). I've been head-desking about this problem for quite some time now, so any help would be greatly appreciated.

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

EDIT: Here'sa jsfiddle link containing the error code.

编辑：这是一个包含错误代码的 jsfiddle 链接。

Answer 1

采纳答案by Tieson T.

You need to move the Bootstrap script reference aboveyour ready event. So, the bottom of your page should look like this:

您需要将 Bootstrap 脚本引用移至就绪事件上方。因此，您的页面底部应如下所示：

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

Also, since you specified an HTML5 doctype, the typeattribute is optional in the scripttag.

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

EDIT 2:

编辑 2：

I'm fairly certain you can get rid of the manual tab binding - I don't use it on my site, and this jsFiddle doesn't do it either: http://jsfiddle.net/C3gQb/

我很确定你可以摆脱手动标签绑定 - 我不在我的网站上使用它，这个 jsFiddle 也没有这样做：http: //jsfiddle.net/C3gQb/

As you can see, you just need to bind the click events of your "tabs", and then it will work. This should work:

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

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

If it doesn't, I suspect there is something unusual about your browser/dev environment that isn't obvious from what you've posted.

如果没有，我怀疑您的浏览器/开发环境有一些不寻常的地方，从您发布的内容中看不出来。

EDIT 4

编辑 4

Yeah, we've isolated the problem with your new jsFiddle. I tweaked the top 2 for this version: http://jsfiddle.net/C3gQb/4/- and those two now work:

是的，我们已经用你的新 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>

Answer 2

回答by Praveen Kumar Purushothaman

I can see that you are referencing an older version of jQuery. Can you upgrade it to 1.9.x? I don't think they are working with an older version of jQuery.

我可以看到您正在引用旧版本的 jQuery。你能升级到1.9.x吗？我不认为他们正在使用旧版本的 jQuery。

Also, try this:

另外，试试这个：

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

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

And also, please move the bootstrap.min.jsbefore the function.

另外，请移动bootstrap.min.js之前的功能。

Answer 3

回答by Priya Choubey

Just check the bootstrap version... it should be v2.3.1 +

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

twitter-bootstrap Twitter Bootstrap 选项卡选择不改变内容

提问by churay

采纳答案by Tieson T.

回答by Praveen Kumar Purushothaman

回答by Priya Choubey

相关推荐

最近更新

标签

twitter-bootstrap Twitter Bootstrap 选项卡选择不改变内容

提问by churay

采纳答案by Tieson T.

回答by Praveen Kumar Purushothaman

回答by Priya Choubey

相关推荐

twitter-bootstrap 使 toastr 警报看起来像引导程序警报

twitter-bootstrap 导航栏中的样式导航药丸

twitter-bootstrap 为什么`input type="date"` 的行为改变了？

twitter-bootstrap 在引导日期选择器中设置开始日期限制

相关推荐

最近更新

标签