hrefの代わりにデータターゲットのタブを使用しているときにブートストラップタブが機能しない

Question

href属性を使用する代わりに、data-target属性を使用してブートストラップタブを開発して、タブペインに一致させます。hrefは、私のルート）。

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a data-target="home">Home</a></li> 
    <li><a data-target="profile">Profile</a></li> 
    <li><a data-target="messages">Messages</a></li> 
    <li><a data-target="settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

<script> 
    jQuery(function() { 
     jQuery('#myTab a:last').tab('show') 
    }) 
</script> 

このフィドルhttp://jsfiddle.net/xFW8t/4/をご覧ください。どこで私は全体を再現した。

自分のタブにブートストラップスタイルを適用したくない、機能だけを望み、スタイルを適用したい、とにかくブートストラップスタイルを適用するのを止めるのはどうですか？ このご支援のおかげで、事前にお手伝いしてください。

Answer 1

は、あなたのマークアップで

<a data-target="#home" data-toggle="tab">Home</a> 

Js Fiddle Demo

Answer 2

は次のようにしてみてください：@Sachinで述べたように

jQuery(function() { 
    jQuery('#myTab a').on('click', function() { 
     $(this).tab('show'); 
    }); 
}) 

Answer 3

をdata-toggle="tab"属性を追加し、あなたはdata-toggle属性を指定する必要があります。 それ以外の場合は、data-targetを正しく記入してください。 `data-targetで使用する場合、これらは、jQueryのセレクタ、ない要素IDを取る（link）

Answer 4

あなたがdata-toggle="tab"を使用している場合 - 。あなたは、JSの初期化を削除することができます -

<script> 
    jQuery(function() { 
     jQuery('#myTab a:last').tab('show') 
    }) 
</script> 

ブートストラップは、自動的にタブを初期化します。

あなたがmauallyあなたのタブを初期化したい場合 - あなたは個別にレイアウトやITINからすべてのタブをdata-toggle="tab"を削除することができますヘルプを

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
})