2.0ブートストラップ]タブには、ナビゲーションバー

Question

OK、jQueryのを使用して、IM（エッジ）のバージョンに表示され、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--> 

私は理論を知っています、そしてこのような単純なコードは、 "data-toggle =" tab "を各タグに入れても、#Directionはナビゲーションバーに表示されず、コンテンツのみが変更され、URLはhttp://twitter.github.com/bootstrap/javascript.html#tabsは説明しませんこれはナビのようですが、タブが付いています。私はこのすべての情報をナビゲーションバーに表示する必要があります。同様にhttp://Your-url.com/#yourtabclicked

Answer 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の作品）が必要です。

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

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