带有 data-toggle="tab" 的 bootstrap 2.0 选项卡不会出现在导航栏上答案

【问题标题】：bootstrap 2.0 tab with data-toggle="tab" doesnt appear on navigation bar带有 data-toggle="tab" 的 bootstrap 2.0 选项卡不会出现在导航栏上
【发布时间】：2012-04-16 10:40:27
【问题描述】：

好的，我使用的是 Jquery (edge) 版本和 bootstrap 2.0，我有这个代码：

    <div id="leftcol">
    <div id="ppl" class="tabbable tabs-left">
        <ul id="tabppl">
        <li class="active"><a class="bl" href="#1" data-target="#1" data-toggle="tab"> 1<span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#2" data-target="#2" data-toggle="tab"> 2<span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#3" data-target="#3" data-toggle="tab"> 3 <span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#4" data-target="#4" data-toggle="tab">  4<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#5" data-target="#5" data-toggle="tab"> 5<span class="arroright"> </span></a></li>
        <li><a class="bl" href="#6" data-target="#6" data-toggle="tab"> 6<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#7" data-target="#7" data-toggle="tab"> 7 <span class="arroright"> </span></a></li>
        <li><a class="bl" href="#8" data-target="#8" data-toggle="tab"> 8<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#9" data-target="#9" data-toggle="tab">9 <span class="arroright"> </span></a> </li>
        </ul>
    </div><!-- ppl-->
</div><!--leftcol-->

我知道这个理论，只有当我在每个 -a- 标记中添加“data-toggle="tab"” 但#Direction 没有出现在导航栏上时，这样的简单代码才有效，它只会改变内容, url http://twitter.github.com/bootstrap/javascript.html#tabs 没有解释这一点，就像一个导航，但带有标签。我需要所有这些信息出现在导航栏上。赞http://Your-url.com/#yourtabclicked

【问题讨论】：

标签： jquery tabs twitter-bootstrap navigationbar

【解决方案1】：

我发现了一些有用的东西。它使所有 URL 都与 #ID 指针一起工作。只需添加以下内容：

$(function () {
  var activeTab = $('[href=' + location.hash + ']');
  activeTab && activeTab.tab('show');
});

当您单击它时，其他代码会显示在导航栏上打开的标签：

$('.nav a').on('shown', function (e) {
  window.location.hash = e.target.hash;
})

大部分代码位于本网站的不同部分。

注意：您需要最新的 JQuery（实际 1.7.1 作品）。

【讨论】：

【解决方案2】：

选项卡默认设置为 e.preventDefault。

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })

您可以尝试通过以下方式禁用默认设置：

$('body').off('click.tab.data-api');

例如。

  $(function () {

    $('body').off('click.tab.data-api');

    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
         //notice the e.preventDefault() is missing now
         $(this).tab('show');
    })
  })

没有测试，但应该可以。

【讨论】：