1

わかりました、Jquery（エッジ）バージョンとブートストラップ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のように

4

2 に答える 2

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;
})

ほとんどのコードは、この Web サイトのさまざまな場所で見つかりました。

注: 最新の JQuery が必要です (実際には 1.7.1 が動作します)。

于 2012-04-03T20:21:52.750 に答える
1

タブにはデフォルトで 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');
    })
  })

テストしませんでしたが、動作するはずです。

于 2012-04-30T10:55:11.817 に答える