ブートストラップタブをナビゲートするための作業ボタンを作成するにはどうすればよいですか？

Question

私はブートストラップタブをナビゲートするためのボタンを作成してUXを強化しようとしています。私は、ナビゲーションタブのクリックで、ボタンのクリックを置き換えるようにブラウザを騙そうとしました。これはブラウザで動作します（下のjsfiddleにはありません）。すぐに2番目のタブに達するとブラウザの種類がリフレッシュされ、最初のタブに戻ります。あなたがそれをやめないように私を助けてくれますか？事前に おかげ

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

     <div class="tab-content"> 
      <div class="tab-pane active" id="home">Home 
    <br> 
    <div id="avc1"><button class="btn btn-success">Avançar<span class="glyphicon glyphicon-chevron-right"></span></button></div> 
    </div> 
      <div class="tab-pane" id="profile">Profile</div> 
      <div class="tab-pane" id="messages">Message</div> 
      <div class="tab-pane" id="settings">Settings</div> 
     </div> 

jQueryの抜粋

$("#avc1").click(function() { 
    $("#profile").click(); 

}); 

http://jsfiddle.net/vitordhers/ocz2umz2/1/

Answer 1

これは、タブを表示するための正しい方法ではありません。ブートストラップタブのドキュメントに従って。

JavaScriptを経てtabbableタブ（各タブを個別に有効にする必要があります）有効にする：あなたはいくつかの方法で個々のタブをアクティブにすることができます

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

を：

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name 
$('#myTabs a:first').tab('show') // Select first tab 
$('#myTabs a:last').tab('show') // Select last tab 
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)