Twitter Bootstrap选项卡选择不改变内容 [英] Twitter Bootstrap Tab Selection Not Changing Content

查看：123
本文介绍了Twitter Bootstrap选项卡选择不改变内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



以下是代码： 

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< title> Hello，Tabs！< / title> 
 
< link rel =stylesheethref =public / css / bootstrap.min.css> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js>< / script> 
< script type =text / javascriptsrc =public / js / bootstrap.min.js>< / script> 
< / head> 
< body> 
 
 
< h3>版本资讯：< / h3> 
< div class =tabbable tabs-left> 
< ul class =nav nav-tabsdata-tabs =tabs> 
< li class =active> 
< a href =＃project / src / Graph / Graph.pm__0data-toggle =tab> 9424< / a> 
< / li> 
< li> 
< a href =＃project / src / Graph / Graph.pm__1data-toggle =tab> 9058< / a> 
< / li> 
< li> 
< a href =＃project / src / Graph / Graph.pm__2data-toggle =tab> 8928< / a> 
< / li> 
< li> 
< a href =＃project / src / Graph / Graph.pm__3data-toggle =tab> 8926< / a> 
< / li> 
< li> 
< a href =＃project / src / Graph / Graph.pm__4data-toggle =tab> 8924< / a> 
< / li> 
< li> 
< a href =＃project / src / Graph / Graph.pm__5data-toggle =tab> 8890< / a> 
< / li> 
< li> 
< a href =＃project / src / Graph / Graph.pm__6data-toggle =tab> 8889< / a> 
< / li> 
< li> 
< a href =＃project / src / Graph / Graph.pm__7data-toggle =tab> 8887< / a> 
< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-pane activeid =project / src / Graph / Graph.pm__0> 
< p> 
作者：joe< br> 
版本：v9424（2013年2月28日1:31）< br> 
操作：修改< br> 
消息：最终确定了一些代码......现在应该会更好。< br> 
< / p> 
< / div> 
< div class =tab-paneid =project / src / Graph / Graph.pm__1> 
< p> 
作者：joe< br> 
版本：v9058（2013年2月26日晚上9:13）< br> 
操作：修改< br> 
讯息：Hello，world！< br> 
< / p> 
< / div> 
< div class =tab-paneid =project / src / Graph / Graph.pm__2> 
< p> 
作者：joe< br> 
版本：v8928（2013年2月25日上午2:08）< br> 
操作：修改< br> 
讯息：Hello，world！< br> 
< / p> 
< / div> 
< div class =tab-paneid =project / src / Graph / Graph.pm__3> 
< p> 
作者：joe< br> 
版本：v8926（2013年2月25日1:14）< br> 
操作：修改< br> 
讯息：Hello，world！< br> 
< / p> 
< / div> 
< div class =tab-paneid =project / src / Graph / Graph.pm__4> 
< p> 
作者：joe< br> 
版本：v8924（2013年2月24日10:26）< br> 
操作：修改< br> 
讯息：Hello，world！< br> 
< / p> 
< / div> 
< div class =tab-paneid =project / src / Graph / Graph.pm__5> 
< p> 
作者：joe< br> 
版本：v8890（2013年2月23日晚上9:59）< br> 
操作：修改< br> 
讯息：Hello，world！< br> 
< / p> 
< / div> 
< div class =tab-paneid =project / src / Graph / Graph.pm__6> 
< p> 
作者：joe< br> 
版本：v8889（2013年2月23日晚上9:53）< br> 
操作：添加< br> 
讯息：Hello，world！< br> 
< / p> 
< / div> 
< div class =tab-paneid =project / src / Graph / Graph.pm__7> 
< p> 
作者：joe< br> 
版本：v8887（2013年2月23日9:40）< br> 
操作：添加< br> 
讯息：Hello，world！< br> 
< / p> 
< / div> 
< / div> 
< / div> 
 
 
 
< script type =text / javascript> 
 jQuery（document）.ready（function（$）{
 $（'。nav-tabs'）。tab（）; 
}）; 
< / script> 
< / body> 
< / html>

所有依赖文件在我运行时都可以正常加载（仅供参考，引导程序版本使用的是2.3.1）。我一直在这个问题上长时间讨论这个问题，所以任何帮助将不胜感激。

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

解决方案

您需要移动Bootstrap脚本参考上方您的准备​​好事件。因此，页面的底部应该如下所示： 

 < script src =public / js / bootstrap.min。 JS>< /脚本> 
< script> 
 jQuery（document）.ready（function（$）{
 $（'。nav-tabs'）。tab（）; 
}）; 
< / script>

另外，由于您指定了HTML5文档类型，因此类型脚本标记中，$ c>属性是可选的。


$ b 编辑2 ：



我相当肯定你可以摆脱手动标签绑定 - 我没有在我的网站上使用它，而这个jsFiddle也没有这样做：

a href =http://jsfiddle.net/C3gQb/ =nofollow noreferrer> 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>

如果没有，我怀疑浏览器/开发环境有些不寻常， t
$ b

编辑4



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

< '.nav-tabs a'）。on（'click'，function（e）{e.preventDefault（）; $（this）.tab（'show'）;}）;}）; < link href =https://maxcdn.bootstrapcdn.com/twitter-tutorials>

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.

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.

EDIT: Here's a jsfiddle link containing the error code.

解决方案

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

<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 type attribute is optional in the script tag.

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

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

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:

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

这篇关于Twitter Bootstrap选项卡选择不改变内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆