ブートストラップ3タブを使用してタブを変更する前に確認を求めるにはどうすればよいですか？

Question

ブートストラップ3を使って標準のタブを設定しました。各タブは、ユーザーが情報を入力するためのフォームです。現在、各フォームの下部に保存ボタンがあり、現在のタブに情報を保存しますが、ユーザーがページ上部の別のタブをクリックして

var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.'); 

のOKまたはキャンセルボタン付きの警告です。 [OK]をクリックすると、クリックしたタブに移動し、キャンセルした場合は現在のタブに残ります。どのように私はこれを行うことができます誰か任意のアイデア？私は一日中これを手に入れようとしていたが運がない。ブートストラップのタブを使用する必要がありますか、それともブートストラップのタブをオーバーライドするのではなく、自分のタブの機能を構築する方が簡単でしょうか？

Answer 1

Bootstrap 3 docsには、このようなものを設定できます。あなたのタブボタンのリスナーには、確認ボックスを表示し、その応答を処理するためのロジックを追加します。

$('#myTabs a').click(function (e) { 
    e.preventDefault() 
    var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.'); 
    if (areYouSure === true) { 
    $(this).tab('show') 
    } else { 
    // do other stuff 
    return false; 
    } 
}) 

Answer 2

あなたのタブにクラスを追加して、あなたがモーダルまたはbootboxを発射したいクリックで機能を使用することができますユーザーに新しいタブを継続するかどうかを確認します。 「いいえ」を選択した場合は、新しいタブの読み込みを禁止します。はいを選択した場合は続行します。答えを

https://api.jquery.com/click/

http://bootboxjs.com/examples.html